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开始 使 用 


来 源 : 开始 使 用 


开发 者 


项 目 结构 


深入 控 气 UIkit 的 核心 ， 了解 关于 它 的 一 切 。 


GitHub 


Ulkit 被 托管 在 GitHub 上 ， 基 于 MIT 许可 协议 。 欢迎 使 用 它 应 用 于 个 人 或 商业 项 
目 。 想 要 获取 UIKit 所 有 的 源 文件 ， 只 需 克 隆 GitHub 上 的 资源 库 ， 或 者 直接 下 载 最 
新 的 版 本 。 


下 载 源 代码 


文件 结构 


Ulkit 基于 LESS 创 建 ，LESS 是 一 款 CSS 预 处 理 器 ， 将 CSS 赋予 了 动态 语言 的 特 
性 ， 如 变量 ， 继 承 ， 运 算 ， 函 数 等 。 它 将 写 入 LESS 中 的 代码 编译 成 为 CSS。 它 将 
写 在 Less 里 的 代码 编译 成 CSS。Ulkit 主 要 的 文件 结构 如 下 : 


文件 夹 描述 
/docs 包含 你 正在 看 的 Ulkit 文 档 的 绝 大 多 数 文件 
/src 包含 全 部 Less 和 JavaScript 组 件 文件 
/tests 包含 所 有 组 件 的 测试 文件 
/themes 在 也 文件 夹 中 包 合 的 所 有 额外 提供 的 主题 文件 。 
/vendor 包含 Ulkit 所 使 用 的 jQuery 和 其 他 的 外 部 库 。 


所 有 编译 版 和 压缩 版 CSS 文 件 、JS 文 件 ， 以 及 Less 和 Sass 文 件 都 能 在 独立 的 
Bower Ulkit repository 项 目 中 找到 。 查 看 Less 和 Sass 文件 获取 更 多 信息 。 


自动 地 预 处 理 


为 了 自动 化 处 理 Less 文 件 编译 成 为 CSS 的 过 程 ， 我 们 使 用 Gulp， 一 款 基 于 Node.js 
的 前 端 构 建 工 具 ， 它 监控 你 的 工作 目录 。 无 论 何 时 ， 只 要 你 保存 了 有 修改 行为 的 源 
文件 ，Gulp 都 会 自动 地 将 所 有 文件 编译 成 独立 的 CSS 文 件 。 


首先 ， 你 需要 安装 Node， 并 设置 gulp 作为 一 个 全 局 的 安装 。 最 后 ， 切 换 到 Ulkit 
目录 ， 安 装 Node 依 赖 模块 (Node dependencies) ° 


npm install -g gulp 


cd uikit 
npm install 


现在 ， 你 可 以 运行 Gulp 来 创建 和 修改 版 本 。Ulkit 的 内 置 版 本 被 放 在 /dist 目录 
中 。 通 过 主题 名 称 参数 来 只 创建 一 个 指定 的 主题 。 


gulp [-t themename] 


acces equ pq ie uas. 在 你 每 次 保存 时 ， 自 动 地 编译 文 
件 。 通 过 主题 名 称 参数 来 监控 一 个 指定 的 主题 以 提升 建设 进度 


gulp watch [-t themename] 


加 载 新 的 主题 和 样式 到 定制 工具 中 。 


gulp indexthemes 


测试 
Ulkit 为 每 个 组 件 提供 测试 文件 。 其 中 每 个 页 面 都 包含 了 组 件 的 测试 示例 ， 并 为 你 提 
供 了 一 个 关于 盒 模 型 所 支持 的 所 有 可 能 性 的 总 览 。 


Ulkit 使 用 BrowserSync 加 速 你 的 工作 流程 。 运 行 gulp sync ， 你 就 能 在 制作 自 
eus e 即时 地 查看 改动 ， 这 不 只 是 在 浏览 器 中 ， er 
设备 。 你 能 在 测试 中 切换 所 有 的 组 件 和 主题 ， 其 至 切换 到 RTL 模 式 (从 右 到 左 ) 


前 往 测试 


Less & Sass 文件 


一 个 涵盖 包括 LESS 和 Sass 在 内 所 有 分 发 文件 的 独立 Ulkit Bower 仓库 。 


Ulkit 的 伟大 之 处 在 于 ， 你 可 以 很 轻松 地 将 它 的 源 文 件 集成 到 你 的 项 目 中 ， 并 能 保障 
在 你 的 自 定义 工作 流 能 使 用 你 最 喜爱 的 CSS 预 处 理 器 来 构建 资源 (assets) 。 


Ulkit 使 用 Bower 包 管理 器 来 加 载 资 源 (assets) 。 因 此 Ulkit 自动 生成 分 发 文件 到 
独立 的 Bower Ulkit repository。 它 包含 所 有 来 自 Ulkit 及 其 组 件 的 CSS ` Less ` 
SCSS 和 Javascript 文 件 。 

获取 最 新 的 Ulkit 分 发 文件 


1. 安装 Bower: bower install uikit 
2. 或 者 ， 从 Github 获取 包 。 


你 会 发 现 Less 和 Sass 文件 都 存在 ， 在 它们 各 自 独 立 的 文件 夹 中 : 
/uikit 
less/ 
uikit.less 
ess 


uikit-mixins.scss 
uikit.scss 


[E 4k 83258 E T 4e X Less 


使 用 Less AHER T X o REA Less 文件 的 顶部 引入 UIkit 及 其 附加 组 件 ， 然 
后 利用 Ulkit 的 钩子 和 履 写 Ulkit 变量 ， 就 能 开始 定制 了 。 


Example 
Qimport "uikit/less/uikit.less'; 


Qimport "uikit/less/components/autocomplete.less"; 


// your custom code goes here, e.g. mixins, variables 


4E 4k 8328 BH T de X Sass 


由 于 Sass 解析 代码 的 原因 ， 它 需要 首先 引入 uikit-mixins.scss 
自 定义 项 (钩子 、 变 量 等 ) ， 最 后 再 加 入 Ulkit 和 附加 组 件 的 文件 。 


Example 
Qimport "uikit/scss/uikit-mixins.scss"; 


// 此 处 填 入 你 的 代码 ， 比 如 : mixins, variables 


Qimport "uikit/scss/uikit.scss'; 
Qimport "uikit/scss/components/autocomplete.scss"; 


， 然 后 添加 


创建 主题 


扩展 Ulkit 并 添加 你 自己 的 独一无二 的 主题 。 


如 何 开 始 


默认 地 ，UIkit 带 有 一 个 非常 基础 的 主题 。 如 果 要 修改 它 的 样式 ， 你 不 需要 编辑 任何 
核心 框架 文件 。 相 反 ， 你 可 以 通过 创建 一 个 自 定义 主题 来 扩展 UIKit。 这 样 便 允 许 你 
轻松 地 更 新 Ulkit 的 核心 文件 。 我 们 甚至 提供 了 一 些 灵 巧 的 主题 以 帮助 你 入 门 。 要 创 
建 自己 的 主题 ， 请 按照 下 面 步 骤 操 作 : (这 里 有 一 篇 文章 可 以 参考 下 : uikitlE JF 
发 前 期 配置 及 定制 主题 方法 ) 


1. 创建 主题 目录 


下 载 或 克隆 UIKit， 安 装 Node 和 Gulp 。 最 后 ， 在 这 里 创建 你 的 主题 文件 来 
/custom/THEME-NAME 。 如 果 /custom 不 存在 ， 那 就 创建 它 ! 


注意 /custom 文件 夹 设 置 为 git ignore， 这 样 可 以 防止 你 的 自 定义 文件 被 推 入 到 
UIKit 库 中 。 如 果 你 在 使 用 克隆 版 Ulkit's git 仓库 ， 它 将 是 一 次 很 好 的 将 /custom 
作为 你 自己 的 git 仓 库 的 实践 。 这 样 ， 你 的 主题 文件 的 版 本 控制 将 不 会 受到 UIkit 文 件 
的 和 干扰。 


2. 添加 你 的 主题 


在 /custom/THEME-NAME 文件 夹 中 创建 uikit.less 文件 ， 并 添加 
@import "../../src/uikit.less"; 规则 来 访问 核心 框架 中 的 所 有 Less 文 件 并 
采用 它 的 基础 样式 。 好 了 ， 你 可 以 从 零 开始 添加 你 自己 的 主题 了 。 


注意 为 了 能 立即 开始 你 的 工作 ， 我 们 提供 了 上 默认、 渐变 和 扁平 三 个 主题 。 所 有 默认 
文件 都 已 经 引入 了 ， 你 同样 可 以 找到 所 有 主题 文件 以 及 与 它们 相关 的 钩子 。 所 以 你 
需要 做 的 是 复制 文件 夹 到 /custom 目录 中 ， 并 重 命名 。 

3. 定制 和 测试 

在 你 的 Ulkit 文件 夹 中 运行 gulp 的 indexthemes 指令。 现在， 刚刚 新 建 的 主题 
就 将 会 自动 出 现在 定制 工具 和 测试 文件 中 。 

4. 构建 你 的 主题 


你 可 以 在 定制 工具 中 生成 你 的 主题 的 CSS。 如 果 你 想 使 用 gulp 指令 来 做 这 事 ， 运 
行 gulp dist -t THEME-NAME 就 行 了 。 生 成 的 文件 被 放置 在 dist/ 文件 夹 
中 。 


最 佳 主题 实践 
设计 你 的 主题 有 多 种 不 同 的 方法 ， 我 们 推荐 以 下 的 工作 流程 。 
1. 使 用 变量 


首先 要 做 的 是 自 定义 已 声明 的 变量 的 值 。 你 可 以 在 核心 框架 的 Less 文 件 中 找到 所 有 
组 件 的 变量 ， 在 你 的 主题 中 重 写 它们 。 


Example 


/src/core/button/button.less 


// 默认 值 
Qbutton-height: 30px; 


/custom/THEME-NAME/button.less 


// 新 的 值 
Qbutton-height: 35px; 


2. 使 用 钩子 

为 了 防止 架空 选择 器 ， 我 们 使 用 Less 的 混合 (Mixins) 方法 与 Ulkit 源码 中 预定 义 
的 选择 器 进行 挂钩 ， 并 运用 其 附加 属性 。 选 择 器 不 必 在 所 有 文件 中 重复 填写 ， 全 局 
的 修改 变 得 更 容易 了 。 

Example 


/src/core/panel/panel.less 


// CSS 规则 
.Uk-panel ( 
background: Qbackground; 


// mixin 混合 增加 新 的 声明 
. hook-panel; 


/custom/THEME - NAME/panel.less 


// mixin 混合 增加 新 的 声明 
.hook-panel() ( color: zfff; } 


3. R 42 8543 -T- [Miscellaneous hooks 

如 果 没 有 变量 也 没有 钩子 可 用 ， 当 然 你 也 可 以 自行 创建 一 个 你 自己 的 选择 器 。 为 
此 ， 请 使 用 .hook-panel-misc 钧 子 并 将 你 的 选择 器 写 入 其 中 。 这 样 将 会 把 你 的 新 选 
择 器 整合 到 编译 后 的 CSS 文 件 的 合适 位 置 。 

Example 


/custom/THEME - NAME/panel.less 


// misc mixin 
.hook-panel-misc() { 


// 新 的 规则 
.Uuk-panel a ( color: zf00; } 


创建 样式 


拓展 Ulkit 并 新 建 属于 你 的 独一无二 的 样式 。 


仅仅 通过 一 组 变量 就 可 以 改变 现 有 主题 的 外 观 。 你 可 以 为 每 个 主题 创造 无 限 种 的 样 
式 。 要 创建 你 自己 的 样式 ， 请 按照 下 列 步骤 操作 : 


1. 创建 样式 目录 
在 这 里 创建 你 的 样式 文件 夹 /custom/THEME-NAME/styles/STYLE-NAME 
2. 添加 你 的 样式 
在 /custom/THEME-NAME/styles/STYLE-NAME 文件 夹 中 创建 一 个 空白 的 


style.less 文件 。 现 在 你 可 以 手动 添加 新 的 变量 声明 或 者 使 用 定制 工具 。 当 你 完成 
时 ， 点 击 Get Less 按钮 保存 在 你 的 样式 文件 到 你 的 样式 到 文件 夹 中 。 


3. 定制 和 测试 


在 Ulkit 目 录 中 运行 gulp task indexthemes 使 你 刚才 创建 的 样式 可 以 在 定制 工具 和 测 
试 页 面 中 可 见 。 


4. 持续 定制 


现在 ， 你 可 以 继续 自 定义 你 的 样式 了 。 


Customizer.json 


这 个 文件 用 于 定义 你 的 主题 外 观 中 的 控件 数量 。 


个 主题 都 有 其 特定 的 customizer ,json 。 它 定义 了 哪些 变量 是 默认 显示 的 ， 哪 
些 变量 仅 在 高 级 模式 中 显示 。 这 个 文件 分 为 controls 和 groups 两 部 分 。 


E qe 


Controls/ 控 件 


控件 (controls) 用 于 定义 如 何在 定制 工具 中 显示 变量 。 默 认 情 况 下 ， 所 有 的 变量 
都 显示 在 输入 框 (input) 元 素 中 。 你 可 以 使 用 以 下 类 型 (type) 来 改变 默认 的 输入 
框 。 


Type 描述 
"type": "color" 将 含有 色彩 数值 的 输入 框 转变 为 易 用 的 色彩 选择 器 。 
lippus eq 使 用 这 种 类 型 得 到 一 个 选择 框 ， 替 代 输 入 框 。 
将 会 转变 成 带 类 似 Ur| 的 附加 选项 的 选择 框 或 选择 框 


type: "ront 组 。 


Variables/ È € 


选择 了 输入 框 的 类 型 后 ， 你 还 须 定 义 哪些 变量 会 相互 影响 。 你 可 以 使 用 特定 的 单个 
变量 或 者 使 用 通配符 * 来 选择 一 组 ， 而 不 是 一 个 一 个 地 单独 设置 每 个 变量 。 


只 影响 @global-border 和 Qglobal-light-border ° 


{ 

"vars": [ 
"Qglobal-border", 
"Qglobal-light-border" 

] 

} 


通配符 变量 


影响 所 有 以 -color 和 -background 结尾 的 变量 。 


"vars": [ 
MESI OE 
"* background" 


通过 设置 "type": "color" 将 下 面 的 示例 中 所 有 以 -color X 


-background 结尾 的 变量 变 成 一 个 简单 易 用 的 颜色 选择 器 ， 需 要 注意 的 是 变量 的 
值 必须 是 一 个 颜色 值 。 


Example 


{"controls": [ 


{ 
VbVDO COT 
"vars": [ 
ECON 
"*-background" 
I 
} 
]} 
选择 元 素 


如 果 一 个 变量 只 能 使 用 特定 的 值 ， 你 可 以 通过 使 用 "type": "select" 轻松 地 将 
输入 元 素 变 成 一 个 选择 元 素 ， 并 加 入 可 选择 的 选项 。 


Example 


{"controls": [ 


{ 
"type": "select", 
varsa] 
"* weight" 
]; 
"options": [ 
{"name": "Normal", "value": "normal"}, 
{"name": "Bold", "value": "bold"} 
] 
} 


]} 


字体 


当 涉 及 到 字体 时 ， 你 可 以 使 用 上 面 介 绍 的 “选择 元 素 "方法 或 通过 设置 
"type": "font" 来 创建 一 个 字体 选择 框 ， 你 可 以 添加 一 些 值 ， 比 如 一 个 字体 url 
或 者 将 你 的 字体 分 成 几 组 。 


Example 


{"controls": [ 


{ 
"type" . "font" ; 
"vars": [ 
"*-font-family" 
]， 
"options": ( 
"System Fonts": [ 
("name": "Arial", "value": "X"Helvetica NeueN", He: 
("name": "Consolas", "value": "Consolas, monospace, 
]; 
"Google Fonts": [ 
("name": "Abel", "value": "'Abel'", "url":"http://1 
("name": "Asul", "value": "'Asul'", "url":"http://1 
} 
} 





Groups/ 组 


组 (groups) 定义 了 哪些 变量 应 该 显示 在 定制 器 的 侧 边 栏 中 。 你 可 以 把 一 些 相 关 的 
变量 组 合 到 一 起 放 在 一 个 组 中 ， 显 示 在 一 个 标题 下 ， 或 者 在 Advanced Mode( 高 级 
模式 ) 中 显示 。 


Example 


这 两 个 变量 的 设置 将 被 默认 显示 在 定制 器 的 侧 边栏 中 。 


("groups": [ 


"label": "Backgrounds", 

avans arai 
"Qglobal-background", 
"Qglobal-dark-background" 


} 
]} 


在 高 级 模式 中 显示 导航 栏 组 件 的 所 有 变量 。 


("groups": [ 

{ 
"label" : "Navbar" , 
"advanced": true, 
"vars": [ 

"Qnavbar -*" 

I 

}, 


]} 


JavaScript 


使 用 data 属性 ， 将 JavaScript 应 用 于 Ulkit 的 组 件 。 


你 只 需要 在 HTML 元 素 中 添加 data-uk-* 属性 就 能 使 用 所 有 的 UIKIT 组 件 ， 而 无 
需 无 需 编写 一 行 JavaScript。 这 是 在 Ulkit 中 使 用 任意 组 件 时 应 当 首 先 考虑 的 最 佳 
做 法 。 


Markup 

«button data-uk-button-My Button«c/button-» 
当然 你 仍然 可 以 通过 使 用 JQuery 的 API 来 使 用 这 些 组 件 。 
Markup 


$(".button").uk("button"); 


AMD 支持 


AMD (异步 模块 定义 ) 是 一 种 定义 JavaScript 模块 以 及 模块 之 间 的 依赖 性 的 方式 ， 
因此 他 们 可 以 通过 异步 加 载 的 方式 来 使 用 。 


用 法 


/* UIkit 核心 的 简单 请 求 */ 
require("path/to/uikit.js", function(UI)( 
// UI 是 UIkit 的 全 局 对 象 ， 又 名 $.UIkit 


3): 


自动 加 载 Ulkit 及 附加 组 件 


/* 首先 建立 require.js */ 
requirejs.config(( 


paths: { 
"uikit": 'path/to/uikit.js' 
}, 
config: { 
UID dopo 
"base": "path/to/uikit dist folder" 
} 
} 


3); 


/* 现在 ， 你 可 以 自动 加 载 UIKit 和 附加 组 件 了 ， 用 过 号 隔 开 。 */ 
require("uikit!notify,sortable", function(UI)( 


// 访问 已 加 载 的 附加 组 件 : UI.notify, Ul.sortable 


3); 


复写 默认 的 组 件 设 置 
调整 默认 的 组 件 设置 是 可 行 的 ， 你 可 以 看 一 下 下 面 的 例子 : 
用 法 


// 履 写 默认 的 工具 提示 设置 
UIkit.on('beforeready.uk.dom', functior 


$.extend(UIkit.components.tooltip.[ 
pos: 'top', 
delay: 500, 
animation: true 





T 3LDOM ， 通 过 诸如 AJAX 的 方式 自动 初始 化 新 添加 的 
组 件 。 


如 果 你 希望 通过 JavaScript 动 态 地 将 HTML 标 答 注 入 到 DOM 中 ， 只 需要 添加 
data-uk-observe 属性 到 一 个 父 元 素 中 ， 就 能 自动 地 初始 化 Ulkit 的 JavaScript 组 
件 。 


用 法 


«div data-uk-observe» 
<1-- 在 此 注入 你 的 动态 HTML --» 
«/div» 


2 


i8 at JavaScript 4 2,70 A 


UIkit.domObserve('Zelement', function(element) ( /* 适用 于 元 素 内 部 的 D 


gee====== 





基于 可 见 性 变化 ， 检 测 显示 事件 /Check Display event 
on visibility change. 


有 时 ， 一 些 组 件 ， 比 如 网 格 或 选项 卡 被 隐藏 在 标签 中 。 这 或 许 是 与 切换 器 , 模 态 
对 话 框 或 者 下拉 菜单 组 合 使 用 是 发 生 的 。 一 旦 它们 变 得 可 见 ， 他 们 需要 被 重新 计 
算 修改 高 度 或 者 其 他 外 形 尺 寸 。 


为 此 ， 添 加 data-uk-check-display 属性 到 需要 重新 处 理 的 元 素 中 。 现 在 ， 它 
们 监听 由 容器 组 件 触发 的 display.uk.check 事件 ， 比 如 切换 器 。 带 有 
data-uk-margin , data-uk-grid-margin fe data-uk-grid-match 属性 的 
元 素 不 需要 添加 这 个 属性 ， 因 为 它 此 时 是 默认 触发 的 。 


Usage 


<1-- 一 个 位 于 模 态 对 话 框 、 切 换 器 或 者 下 拉 菜 单 中 的 元 素 --> 
«div id="myelement" data-uk-check-disp. 


<script> 
$("4myelement").on('display.uk.check', 

// 自 定义 的 代码 ， 用 于 调整 显示 的 高 度 等 
3); 


«/script» 


4 zur m: 2 
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随 着 我 们 不 断 地 发 行 新 版 的 Ulkit， 当 越 来 越 多 使 用 Ulkit 构 建 的 主题 和 扩展 被 加 载 到 
n pou , — E ZAR 或 者 class 会 被 改变 或 失效 。 当 class 在 两 个 版 本 上 作用 
一 样 时 ， 能 引起 冲突 。 


S 04 你 可 以 自 定 义 Ulkit 的 前 级 。 这 基本 上 会 用 你 设置 的 前 级 来 取代 通常 的 
uk- 


通过 Less 设置 前 组 
如 果 你 不 熟悉 gulp 的 用 法 ， 查 看 自动 预 处 理 了 解 如 何 创建 一 个 Ulkit 构 建 。 创 建 
自 定 义 前 缓 的 Ulkit 版 本 ， 只 需要 在 -p 中 使 用 你 自己 的 前 缓 参 数 ， 即 可 使 所 有 的 


class 和 JavaScript 文 件 变 成 自 定 义 前 级 。 


gulp -p myprefix 


运行 gulp 后 ， 你 将 在 dist 文 件 夹 中 找到 你 的 自 定义 前 缀 构建。 比如: 


.myprefix-grid ( ... ) 


JavaScript 的 无 冲突 模式 


为 了 防止 多 个 版 本 的 自 定义 UIkit 发 生 冲 突 ， 主 需要 在 包含 Ulkit 之 后 调用 
noConflict 方法 : 


var myUIkit = UIkit.noConflict(); 


核心 组 件 


来 源 : 核心 组 件 
Ulkit 全 部 组 件 一 览 。 


UIKit 提 供 了 超过 30 个 模块 化 并 可 扩展 的 组 件 ， 它 们 可 以 组 合 使 用 。 根 据 用 途 及 功 
能 ， 我 们 把 组 件 分 了 为 不 同 的 类 型 。 


默认 


这 些 组 件 通常 用 来 实现 HTML 元 素 的 跨 浏览 器 标准 化 功能 ， 并 添加 了 一 些 非 常 基础 
的 样式 。 


布局 


充分 运用 我 们 完全 响应 式 的 流体 网 格 系统 和 面板 ， 常 见 的 布局 组 成 部 分 如 博客 文章 
和 评论 以 及 其 他 一 些 实用 的 效果 类 型 。 


导航 


UIKit 提供 了 不 同形 式 的 导航 组 件 ， 如 导航 栏 和 侧 导 航 。 使 用 面包 居 或 通过 一 个 分 
页 来 翻阅 文章 。 


元 素 


基本 的 HTML 元 素 样 式 , 如 表格 和 表单 o 这 些 组 件 使 用 自 有 的 类 它们 不 会 因 想 到 
任何 默认 的 元 素 样式 。 


第 用 


在 这 里 你 可 以 找到 一 些 经 常 在 内 容 中 使 用 的 组 件 ， 比 如 按钮 ， 徽 章 ， 这 种 ， 动 画 和 
其 他 很 多 的 组 件 。 


JavaScript 


这 些 组 件 主要 依赖 于 JavaScript 的 淡出 显示 与 隐藏 内 容 ， 比 如 下 拉 菜 单 ， 模 态 对 话 
框 ， 抽 层 和 提示 组 件 等 。 


PT 点 


Ulkit 包含 一 系列 为 各 种 不 同 的 视图 宽度 实现 响应 式 内 容 的 类 。 下 面 的 表格 提供 了 一 
个 关于 一 些 可 用 的 视图 断 点 以 及 相应 的 设备 概述 。 你 可 以 通过 定制 器 来 调整 所 有 
的 断 点 。 


大 小 BT 点 设备 
Mini 小 于 479px 手机 纵向 
Small 480px 到 767px 手机 横向 
Medium 768px 到 959px 平板 电脑 纵向 
Large 960px 到 1199px 台式 机 或 平板 电脑 横向 
Xlarge 1200px 或 以 上 大 屏幕 设备 
CSS 采 构 


为 了 避免 与 其 他 CSS 框 架 冲 突 ， 所 有 的 UIKit 类 均 以 uk- 作为 前 组 进行 命名 。 组 
件 分 为 组 件 本 身 、 子 对 象 和 调节 器 ， 其 类 名 通常 沿用 组 件 名 。 


定义 


: 概述 


组 理论 上 一 个 网 站 经 常用 到 一 部 分 基于 类 的 组 件 模 块 ， 比 如 按钮 。 这 些 都 
件 可 重复 使 用 和 相互 组 合 。 


子 对 象 都 被 放置 在 一 个 组 件 中 用 来 增强 其 功能 性 ， 比 如 一 个 在 提示 框 中 
的 关闭 按钮 。 


修 修饰 类 class 用 来 调整 修改 组 件 及 其 子 对 象 的 样式 ， 比 如 按钮 的 颜色 和 
饰 大 小 。 


默认 


基础 


提供 所 有 HTML 元 素 的 默认 样式 。 

这 个 组 件 定 义 了 你 的 网 页 的 基础 视觉 效果 。 通 过 为 每 个 HTML 元 素 设置 默认 的 色 

彩 、 间 距 、 字 体 尺 寸 和 其 他 属性 实现 强大 的 版 面 效 果 。 本 页 是 一 个 关于 如 何 使 用 基 
础 HTML 元 素 和 Ulkit 如 何 对 它们 进行 风格 化 的 简要 向 导 。 

注意 Ulkit 基 本 上 利用 了 有 名 的 Normalize.css， 但 将 它 分 散在 了 所 有 组 件 。 只 有 必 

要 的 部 分 被 采纳 到 基础 组 件 中 ， 以 保证 未 预 设 的 CSS 样 式 尽 可 能 的 少 。 大 部 分 关于 
CSS 标 准 化 的 代码 被 移入 了 表单 ,按钮 和 表格 这 些 组 件 中 。 这 样 使 得 Ulkit 及 其 组 
件 在 与 其 他 竞争 中 显得 很 厉害 的 样子 ， 所 以 你 不 必 担 心 你 的 项 目 在 不 同 的 浏览 器 中 
的 一 致 性 问题 。 


一 gu 
标题 
使 用 &lt;hi&gt; 到 &lt;h6&gt; 标签 来 定义 你 的 标题 。 


Example 
h1 标题 1 


h2 标题 2 


h3 标题 3 


你 可 以 添加 .uk-h1 * .uk-h2 ， .uk-h3 > .uk-h4 ， .uk-h5 或 
.UKk-h6 类 来 改变 你 的 标题 的 大 小 ， 比 如 让 ha 看 起 来 像 一 个 h3 。 


通过 可 以 自 定义 设置 的 变量 ， 可 对 全 局 的 字体 大 小 、 行 间距 、 边 距 等 常规 元 素 进 行 
调整 。 段 落 和 其 他 块 元 素 也 继承 这 些 变量 值 。 


文本 级 语义 
下 面 的 列表 为 你 提供 了 最 常用 的 文本 层次 语义 ， 以 及 如 何 利 用 它们 的 简短 概述 。 
标签 描述 

&lt;a&gt; 将 文本 转换 为 超 文 本 使 用 a 标签 。 
&lt;em&gt; 强调 文本 使 用 em 标签 。 
&lt;strong&gt; 强调 任何 额外 的 更 重要 文本 使 用 strong 标签 。 
&lt;code&gt; 定义 内 联 代码 片段 使 用 code 标签 。 
&lt;del&gt; 标记 文档 中 已 被 修改 或 删除 的 文本 使 用 ge} 标签 。 
&lt;ins&gt; 标记 文档 中 插入 的 文本 使 用 «inssins 标签 </ins>。 


高 完 显 示 文本 使 用 <mark>mark 标签 </mark>， 它 没有 


&lt;mark&gt; 
任何 语义 含义 。 
&lt;q&gt; 定义 引入 的 语录 在 <q>q 标签 <q> 里 面 使 用 </q> q 标签 
«[q» ° 
定义 一 个 标题 的 缩写 使 用 «abbr title="Abbreviation 
&lt;abbr&gt; die bh. 
9 Element">abbr 标签 </abbr>。 
定义 一 个 项 目 术 语 名 称 使 用 «dfn title="Defines a 
&lt;dfn&gt; d NS ja 
9 definition term">dfn 标签 </dfn>。 
SRPETENESNE 缩小 显示 不 重要 的 文本 使 用 <small>small 标签 


«[small» ° 


水 平 线 
使 用 &lt;hr&gt; 标签 创建 一 条 水 平 线 。 


Example 


引用 文字 
在 文档 中 从 其 他 来 源 引 用 多 行内 容 时 ， 使 用 &lt;blockquote&gt; 标签 。 
Example 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. Ut enim ad minim veniam 


Markup 


«blockquote» 
«p»Quotationc/p» 
«small»Sourcec/small» 

«/blockquote» 


代码 块 


对 于 多 行 代码 ， 使 用 &lt;pre&gt; 元 素 定 义 预 格式 化 文本 。 它 能 创建 提供 保留 
空格 、 制 表 符 和 换行 符 的 新 文本 块 。 内 部 诅 套 &lt;code&gt; 标签 来 定义 代码 


块 。 
重要 为 保证 正确 地 演 染 ， 必 须 确保 避 开 代码 中 的 任何 尖 括 号 。 


Example 


<pre> 
«code»...«/code» 
</pre> 


注意 你 也 可 以 添加 效果 组 件 中 介绍 到 的 .uk-scrollable-text 3, 这 将 设置 最 
大 高 度 为 300px， 并 提供 Y 轴 滚动 条 。 


列表 


创建 一 个 无 序列 表 使 用 &lt;ul&gt; 标签 或 使 用 &lt;ol&gt; 标签 


表 。 &lt;li&gt; 元 素 定 义 列 表 项 。 


Example 


”em 1 1. Item 1 
。 ltem2 2 Item 2 
Item 1 1. Item 1 
Item 2 2 Item 2 
" item 1 1. Item 1 
a [tem 2 2. Item 2 
* ltem 3 3 item 3 


。 [item 4 4. ltem 4 


Markup 


«ul» 
«li»...«/li» 
bus 
«ul» 
«li»...«/li» 
«/ul» 
</li> 
</ul> 


«o1» 
«li»...«/li» 
Im 
«ol» 
«li»...«/li» 
«/ol» 
</li> 
«/ol» 


gx 5A 


创建 一 个 描述 列表 需要 使 用 &lt;dl&gt; 标签 。 使 用 &lt;dt&gt; 
使 用 &lt;dd&gt; 定义 描述 内 容 。 


Example 


定义 项 目 ， 


Description lists 

A description list defines terms and their corresponding descriptions 
This is a term 

This is a description 

This is a term 

This is a description 


Markup 
«dl» 
<dt>. ..</dt> 
<dd>. . .</dd> 
«/dl» 


响应 式 图 片 


UIKit 中 的 所 有 图 片 默 认 都 是 响应 的 。 如 果 布 局 变 窄 ， 图 片 会 调整 它们 的 大 小 并 保 
持 自身 的 比例 。 


Example 
注意 若 要 避免 响应 式 行为 并 保持 图 像 的 原始 尺寸 ， 可 以 为 单独 的 图 片 添 加 


.Uk-img-preserve 类 。 如 果 你 具有 多 张 图 片 ， 也 可 以 将 这 个 类 添加 到 父 容器 
中 。 谷 歌 地 图 不 需要 这 样 的 设置 。 


打印 


优化 您 的 页 面 用 于 经 济 的 打印 。 
这 个 组 件 基于 HTMLS Boilerplate 的 打印 样式 。 它 将 去 掉 页 面 的 背景 颜色 并 改变 字 


页 5 
体 颜 色 为 黑色 以 节省 打印 机 墨水 。 图 片 将 被 按 比 例 缩小 以 适合 页 面 ， 并 且 锚 文本 将 
带 下 划 线 以 区 别 于 常规 文本 。 


对 于 UIkit， 我 们 移 除 了 链接 的 href 及 title 相关 的 规则 。 


布局 类 组 件 


网 格 


创建 一 个 完全 响应 式 并 可 以 瞪 套 的 流动 网 格 布局 。 


UIKit 中 的 网 格 系统 遵循 移动 优先 的 方式 并 且 最 多 可 容纳 10 个 网 格 列 。 它 使 用 网 格 内 
预定 义 的 类 对 每 个 单元 格 的 列 宽 进行 了 定义 。 还 可 以 把 网 格 与 Flex 组 件 中 
的 类 组 合 使 用 ， 虽 然 它 只 能 在 现代 浏览 器 中 正常 


用 法 


向 一 个 父 元 素 添 加 .uk-grid 类 来 创建 网 格 容器 。 对 子 元 素 添 加 一 个 
,Uk-width-* 类 来 限定 单元 格 的 宽度 。 网 格 支持 1 、2、3、4、5、6 和 10 个 单元 
划分 。 下 面 的 列表 为 你 提供 了 可 以 应 用 到 单元 的 uk-width-* 类 的 概述 。 


Class 描述 
.Uk-width-1-1 填 满 可 见 宽度 的 10026 。 
uk width 12 把 网 格 等 分 为 两 半 。 
.uk-width-1-3 to .uk-width-2-3 将 网 格 划分 成 三 分 之 一 。 
.uk-width-1-4 to .uk-width-3-4 将 网 格 划分 成 四 分 之 一 。 
.uk-width-1-5 to .uk-width-4-5 将 网 格 划分 成 五 分 之 一 。 
.uk-width-1-6 to .uk-width-5-6 将 网 格 划分 成 六 分 之 一 。 





.uk-width-1-10 to .uk-width-9-10 将 网 格 划分 成 十 分 之 一 。 
我 们 特意 为 每 组 单元 建立 了 一 种 宛 余 ， 所 以 在 实际 应 用 时 ， .uk-width-5-10 类 
与 ,uk-width-1-2 类 的 实际 效果 都 是 一 样 的 。 

Example 


仔细 看 看 下 面 网 格 的 例子 ， 这 可 以 使 你 了 解 所 有 .uk-width-* 类 的 基本 使 用 方 
法 。 


.uk-width-1-3 .uk-width-1-3 .uk-width-1-3 


.uk-width-1-2 .uk-width-1-2 


. Uk -width-3-10 .uk-width-7-18 


注意 网 格 并 没有 相关 联 的 CSS 样 式 。 在 示例 中 ， 我 们 使 用 了 面板 组 件 。 


Markup 


下 面 是 关于 如 何 使 用 默认 的 两 列 网 格 代码 简单 示例 : 


«div class="uk-grid"> 
«div class="uk-width-1-2">...</div> 
«div class="uk-width-1-2">...</div> 
</div> 


响应 式 宽度 


UIKit 中 提供 了 一 些 非 常 有 用 的 响应 式 宽度 的 类 。 基 本 上 它们 的 使 用 方法 就 像 通常 宽 
度 的 类 一 样 ， 但 是 它们 带 有 前 组， 这 样 它们 只 在 特定 的 断 点 来 产生 效果 。 这 些 类 可 
以 结合 效果 组 件 中 的 可 见 性 类 来 使 用 。 这 对 于 调整 不 同 尺 寸 设 备 的 布局 和 内 容 是 
非常 重要 的 。 


Class 描述 
.Uk-width-* 对 于 任何 宽度 的 设备 ， 网 格 都 保持 列 并 排 。 


影响 宽度 在 480px 以 上 的 设备 。 网 格 列 将 在 较 小 的 
Wa PHE o 
影响 宽度 在 768pX 以 上 的 设备 。 网 格 列 将 在 较 小 的 
do PE o 
影响 宽度 在 960px 以 上 的 设备 。 网 格 列 将 在 较 小 的 
Wa PHE o 


.Uuk-width-small-* 
.Uuk-width-medium-* 
.uk-width-large-* 


*RoxGRGJtiE PRESS TFAA” AE data-uk-grid-margin Æ 
性 o 


Example 


.uk-width-medium-1-2 .uk-hidden-medium .uk-width-medium-1-2 
. uk-width-large-1-3 .uk-width-large-1-3 .uk-width-large-1-3 
.uk-width-1-2 .Uk-hidden-smail .Uk-width-1-2 
.uk-width-medium-1-3 .uk-width-medium-1-3 .uk-width-medium-1-3 


.uk-width-large-1-1 


网 格 排水 沟 /Grid gutter 


.uk-visible-large 


好 吧 ， 其 实 是 网 格 之 间 的 间隔 。 网 格 会 自动 在 列 之 间 创 建 一 个 水 平 间 距 ， 以 及 在 连 
续 的 两 个 网 格 间 创 建 一 个 重 直 方向 的 间隔 。 默 认 情 况 下 ， 网 格 间隔 在 大 屏幕 上 看 起 


来 会 比较 帘 。 


Example 


Lorem ipsum Lorem ipsum 


中 等 排水 沟 /Medium gutter 


在 网 格 之 间 应 用 中 等 的 间隔 ， 只 需要 添加 


Example 


Lorem ipsum Lorem ipsum 


小 点 的 排水 沟 /Small gutter 


在 网 格 之 间 应 用 较 小 的 间隔 ， 只 需要 添加 


Lorem ipsum 


.uk-grid-medium 类 。 


Lorem ipsum 


.uk-grid-small 类 。 


Example 


Lorem ipsum Lorem ipsum 


消除 排水 沟 /Collapse gutter 


完全 地 去 掉 间 隔 ， 只 需要 添加 .uk-grid-collapse X^ 


Example 


Lorem ipsum Lorem ipsum Lorem ipsum 


Wi] 4&8] de RR 
使 用 吝 套 网 格 你 可 以 轻松 地 扩展 你 的 网 格 布局 。 


Example 


Markup 


«div class="uk-grid"> 
«div class="uk-width-1-2">...</div> 
«div class="uk-width-1-2"> 
«div class="uk-grid"> 


«div class="uk-width-1-2">,..</div> 
«div class="uk-width-1-2">,..</div> 


</div> 
</div> 
</div> 


居中 网 格 


.uk-width-1-2 


o 


添加 效果 组 件 中 的 .uk-container-center 类 来 让 一 个 网 格 居 中 显示 


Example 


.uk-container-center 


网 格 分 隔 线 


添加 .uk-grid-divider 类 用 线条 分 隔 网 格 列 。 i MEIN 隔 网 格 ， 只 需 在 


&lt;hr&gt; 或 &lt;div&gt; 元 素 添 加 这 个 类 。 
Example 
.Uk-width-mediuym-1. .Uk-width-medium-1. . uk-width-medium-1. 
.Uk-width-medium-1-3 .uk -width-medium-1-3 ,uk-width-medium-1-3 
Markup 


«div class-"uk-grid uk-grid-divider"»...«/div» 
«hr class-"uk-grid-divider"- 
«div class-"uk-grid uk-grid-divider"»...«/div» 


注意 水 平分 隔 线 不 能 用 在 含有 uk-push-* 类 或 uk-pull-* 类 的 网 格 中 。 


源码 排序 


可 以 更 改 列 的 显示 顺序 ， 使 其 在 源 代码 中 保持 一 个 特定 的 列 顺 序 。 添 加 

.Uk-push-* 类 ， 向 右 移动 列 。 添 加 .uk-pull-* AX» 向 左 移 动 列 。 。 这 可 以 使 
你 进行 类 似 翻 转移 动 设备 或 改变 窗口 宽度 时 改变 列 的 显示 顺序 。 这 些 类 还 可 以 用 于 
偏 移 列 ， 在 列 之 间 建 立 额 外 的 空 障 。 


源码 排序 对 SEO 和 响应 式 设计 是 非常 有 用 的 ， 因 为 在 狭窄 的 视 口中 网 格 会 根据 标签 
的 源 代码 顺序 来 显示 。 


注意 此 功能 只 能 结合 .uk-width-medium-* 类 来 使 用 。 


.uk-width-medium-1-2 .uk-pull-1-2 .uk-width-medium-1-2 .uk-push-1-2 
.Uk-width-medium-2-5 .uk-pull-2-5 .uk-width-medium-2-5 .uk-push-3-5 


Markup 


«div class-"uk-grid'"» 
«div class-"uk-width-medium-1-2 uk-push-1-2" 
«div class-z"uk-width-medium-1-2 uk-pull-1-2" 
«/div» 


.. .</div> 
.. </div> 


匹配 列 的 高 度 


要 匹配 网 格 列 的 高 度 ， 只 需要 在 你 的 网 格 添 加 data-uk-grid-match 属性 。 如 果 
你 的 网 格 包含 多 个 row， 只 有 同一 个 row 中 的 网 格 列 会 被 匹配 。 只 需要 使 用 

data-uk-grid-match="{row: false)" 届 性 就 能 跨越 [OW 的 隔 阅 来 匹配 网 格 列 
的 高 度 。 


Example 


Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet 
consectetur adipisicing elit 
sed do eiusmod tempor 
incididunt ut labore et dolore 
magna aliqua. Ut enim ad 
minim veniam 


Markup 


«div class-"uk-grid" data-uk-grid-match»...«/div» 


注意 如 果 网 格 列 的 宽度 延伸 到 100%， 它 们 的 高 度 将 不 再 匹配 。 这 样 做 是 有 道理 
的 ， 上 比如 说 ， 当 它们 在 一 个 较 窜 的 视 口 中 堆 生 时 。 


匹配 面板 的 高 度 


如 果 想 要 匹配 一 个 网 格 中 多 个 面板 的 高 度 ， 只 需要 添加 .uk-grid-match 类 。 在 
使 用 data 属 性 时 ， 儿 须 添加 {target:'.uk-panel'} 选择 器 。 


Example 
Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit 
amet amet amet, consectetur 
adipisicing elit, sed do 
eiusmod tempor incididunt 
ut labore et dolore magna 
aliqua. Ut enim ad minim 
veniam 
Markup 


«div class-"uk-grid uk-grid-match" data-uk-grid-match-z"[target:'.ul 
«div class-"uk-width-medium-1-3"-» 
«div class-"uk-panel'"»...«/div» 
«/div» 
«/div» 
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包装 多 个 行 (row) 
你 也 可 以 创建 一 个 网 格 ， 使 其 包含 任意 多 个 列 ， 这 些 列 会 自动 地 换 到 下 一 行 。 只 需 


添加 data-uk-grid-margin 属性 ， 就 能 创建 网 格 行 (row) 之 间 的 margin。 通 
常 这 样 的 布局 使 用 了 &lt;ul&gt; 元 素 。 


Example 


Box Box Box 


Box Box Box 


注意 你 也 可 以 对 网 格 列 的 宽度 进行 自 定义 。 只 需 添 加 .uk-width 类 ， 并 使 用 内 
联 样 式 定义 宽度 。 下 面 的 例子 对 宽度 使 用 了 固定 的 像素 值 ， 对 于 图 片 你 也 可 以 这 样 
做 。 


Box Box Box Box 


Box Box Box 


Box 


Markup 


«ul class-"uk-grid" data-uk-grid-margin» 
«1-- 这 些 元 素 使 用 百分比 宽度 --> 
«li class="uk-width-medium-1-5">...</li> 
«li class="Uuk-width-medium-3-10">...</1i> 
«1-- 这 些 元 素 使 用 像素 值 宽度 --> 
«li class-"uk-width" style="width: 100px;">...</1i> 
«li class-"uk-width" style="width: 150px;">...</1i> 


«/ul» 


均匀 的 网 格 列 


要 创建 一 个 子 元 素 的 宽度 都 是 均匀 分 割 的 网 格 ， 你 不 必 为 网 格 中 的 每 个 列表 元 素 里 
添加 同样 的 类 。 只 需要 添加 一 个 ,uk-grid-width-* 类 到 网 格 本 身 即 可 。 


Class 描述 





.uk-grid-width-1-2 将 网 格 均匀 分 为 两 份 

.Uk-grid-width-1-3 将 网 格 均匀 分 为 三 份 

.Uk-grid-width-1-4 将 网 格 均 匀 分 为 四 份 

.Uk-grid-width-1-5 将 网 格 均匀 分 为 五 份 

.Uk-grid-width-1-6 将 网 格 均 匀 分 为 六 份 

.Uk-grid-width-1-10 将 网 格 均匀 分 为 十 份 
Example 

Box Box Box Box Box 

Markup 


«ul class-"uk-grid uk-grid-width-1-5'"-» 
< > /> 
< > /> 

«/ul» 


响应 式 宽 度 


Ulkit 同 样 提 供 了 网 格 的 响应 式 宽 度 类 。 可 以 用 它 保持 均匀 尺寸 的 网 格 列 ， 无 论 设 备 
宽度 如 何 2 


Class 描述 
.Uk-grid-width-* 影响 所 有 设备 宽度 
.UK-grid-width-smal1-* 影响 480px 以 上 的 设备 宽度 。 
.Uk-grid-width-medium-* 影响 768px 以 上 的 设备 宽度 。 
.Uk-grid-width-large-* 影响 960px 以 上 的 设备 宽度 。 
.Uk-grid-width-xlarge-* 影响 1220px 以 上 的 设备 宽度 。 


Example 


Box Box Box Box Box 


Markup 


«ul class-"uk-grid uk-grid-width-1-2 uk-grid-width-medium-1-3 uk-g! 
<li>...</li> 
ese 

</ul> 
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面板 /Panel 


创建 拥有 不 同样 式 的 布局 盒 。 


UIKit 使 用 面板 勾勒 网 页 内 容 中 的 某 些 部 分 ， 它 可 以 拥有 不 同 的 样式 。 通 常 


布置 在 网 格 组 件 的 网 格 列 中 。 


用 法 


， 面 板 被 


面板 组 件 由 面板 本 身 ， 面 板 标题 和 面板 徽章 组 成 。 为 了 防止 产生 多 余 的 空白 ， 面 板 


内 容 顶 部 和 底部 的 maigin 都 被 移 除 了 。 


Class 描述 
.Uk-panel 为 &lt;div&gt; 元 素 添 加 这 个 类 ， 定 义 面板 组 件 。 


.Uk-panel-title 为 标题 元 素 添 加 这 个 类 创建 面板 标题 。 


为 &lt;div&gt; 元 素 添加 这 个 类 创建 一 个 面板 的 徽 


. uk-panel-badge 章 。 风格 化 徽章 样式 最 简单 的 方法 ， 就 是 通 


组 件 中 的 修饰 符 类 。 
Example 


Title = 


Lorem ipsum dolor sit amet 
consectetur adipisicing elit 
sed do eiusmod tempor 
incididunt ut labore et dolore 
magna aliqua 


Jn A d x 


注意 默认 情况 下 ， 面 板 是 空白 的 也 没有 样式 。 因 此 ， 为 面板 添加 修饰 符 类 的 样式 是 


很 重要 的 。 在 例子 中 ， 我 们 使 用 了 .uk-panel-box Xe 


Markup 


«div class-'uk-panel'"» 


«div class-"uk-panel-badge uk-badge'"»...«/div» 


«h3 class-'"uk-panel-title'"-...«/h3» 


«/div» 


网 格 中 的 面板 Panels in a grid 


这 是 一 个 关于 如 何在 网 格 组 件 中 使 用 面板 的 简单 例子 。 两 个 面板 都 使 用 


了 .uk-width-medium-1-2 类 。 


Example 
Title Title 
Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod tempor 

Markup 


«div class-"uk-grid'"» 
«div class-"uk-width-medium-1-2"» 
«div class-z"uk-panel"»...«/div» 
«/div» 
«div class-"uk-width-medium-1-2"-» 
«div class-"uk-panel"»...«/div» 
«/div» 
«/div» 


也 可 以 自己 创建 。 


面板 框 


添加 .uk-panel-box 类 来 创建 一 个 可 见 的 面板 框 。 这 是 默认 的 面板 修饰 样式 。 


Lorem ipsum dolor sit amet, consectetur 


adipisicing elit, sed do eiusmod tempor 


L> 
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小 


Example 


Title 


Lorem ipsum dolor sit 
amet, consectetur 
adipisicing elit 


.Uk-panel-box 


Title 


Lorem ipsum dolor sit 
amet, consectetur 
adipisicing elit 


.Uk-panel-box 


Title 


Lorem ipsum dolor sit 
amet, consectetur 
adipisicing elit 


.uk-panel-box 


Markup 


«div class-"uk-panel uk-panel-box'»...«/div» 


注意 为 面板 创建 鼠标 经 过 效果 ， 只 需 添加 .uk-panel-box-hover 类 。 这 将 在 使 
用 销 文 本 时 带 来 方便 。 


醒目 的 面板 盒 /Panel box primary 


添加 .uk-panel-box-primary 类 来 修饰 面板 框 ， 并 以 不 同 的 颜色 使 其 显得 突 
出 。 


Example 


Title 


Lorem ipsum dolor sit 
amet, consectetur 
adipisicing elit. 


Title 


Lorem ipsum dolor sit 
amet, consectetur 
adipisicing elit. 


Title 


Lorem ipsum dolor sit 
amet, consectetur 
adipisicing elit 


,Uk-panel-box-primer. ,Uk-panel-box-primer.. .Uk-panel-box-primar. 


Markup 


«div class-"uk-panel uk-panel-box uk-panel-box-primary"»...«/div» 


图 


注意 为 面板 创建 鼠标 经 过 效果 ， 只 需 添加 .uk-panel-box-primary-hover X» 
这 将 在 使 用 锚 文本 时 带 来 方便 。 





次 要 的 面板 盒 /Panel box secondary 


为 面板 框 添 加 .uk-panel-box-secondary 类 


Example 


Title 


Lorem ipsum dolor sit 
amet, consectetur 
adipisicing elit 


.uUk-panel-box-second. 


Markup 


Title 


Lorem ipsum dolor sit 
amet, consectetur 
adipisicing elit 


.uk-panel-box-second. 


， 给 它 一 个 白色 的 背景 。 


Title 


Lorem ipsum dolor sit 
amet, consectetur 
adipisicing elit 


.Uk-panel-box-seconcG 


«div class-"uk-panel uk-panel-box uk-panel-box-secondary">...</div: 


ki — —— OB 


注意 为 面板 创建 鼠标 经 过 效果 ， 只 需 添 加 


类 。 这 将 在 使 用 锚 文 本 时 带 来 方便 。 


鼠标 经 过 面板 /Panel hover 


添加 .uk-panel-hover 类 为 面板 天 和 鼠标 经 过 效果 ， 这 将 为 用 作 锚 的 面板 带 来 便 


利 o 


Example 


Title 


Lorem ipsum dolor sit 
amet, consectetur 
adipisicing elit 


.uk-panel-hover 


Markup 


` 


Title 


Lorem ipsum dolor sit 
amet, consectetur 
adipisicing elit 


.Uk-panel-hover 


.Uk-panel-box-secondary-hover 


Title 


Lorem ipsum dolor sit 
amet, consectetur 
adipisicing elit 


.Uuk-panel-hover 


«a class-"uk-panel uk-panel-hover" hrefz""»...«/a» 


面板 标题 /Panel header 


添加 .uk-panel-header 类 ， 用 一 条 水 平 线 分 隔 面板 的 标题 和 内 容 。 


Example 


Markup 


«div class-"uk-panel uk-panel-header"»...«/div» 


面板 问 距 


添加 .uk-panel-space 添加 类 来 增加 面板 四 周 的 间距 。 


Title Title Title 

Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit 

amet, consectetur amet, consectetur amet, consectetur 

adipisicing elit adipisicing elit adipisicing elit 
.Uk-panel-space .Uk-panel-space .Uk-panel-space 


Markup 


«div class-"uk-panel uk-panel-space"»...«/div» 


面板 分 隔 线 


添加 .uk-panel-divider 类 将 重 直 堆 受 的 面板 用 水 平 线 进行 分 隔 。 


Example 


Title 


Lorem ipsum dolor sit amet, consectetur 
adipisicing elit. .uk-panel-divider 


Title 


Lorem ipsum dolor sit amet, consectetur 


adipisicing elit. .uk-panel-divider 


Title 


Lorem ipsum dolor sit amet, consectetur 
adipisicing elit. .uk-panel-divider 


Markup 


«div class-"uk-grid'» 
«div class-"uk-width-medium-1-2"-» 
«div class-"uk-panel uk-panel-divider"»...«/div» 
«div class-"uk-panel uk-panel-divider"»...«/div» 
«div class-"uk-panel uk-panel-divider"»...«/div» 
«/div» 
«/div» 


注意 使 用 网 格 组 件 中 的 .uk-grid-divider 类 分 隔 网 格 列 。 


带 图 片 预览 的 面板 框 


为 了 在 一 个 面板 内 显示 不 带 有 任何 边框 的 图 片 ， 仅 需 添 加 ,uk-panel-teaser X 
至 该 面板 内 部 的 &lt;div&gt; 元 素 。 


Example 
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Lorem ipsum dolor sit amet, 
consectetur adipisicing elit. 


Markup 


«div class-"uk-panel uk-panel-box'» 
«div class-'uk-panel-teaser"-» 
«img srcz"" alt=""> 
«/div» 
«/div» 


带 图 标的 面板 


在 面板 标题 中 为 &lt;i&gt; 或 &lt;span&gt; 元 素 添 加 一 个 .uk-icon-* 类 ， 
可 以 轻松 地 将 图 标 组 件 中 的 图 标 应 用 在 面板 中 。 


Example 


& Panel 


Lorem ipsum dolor sit 
amet, consectetur 
adipisicing elit, sed do 
eiusmod tempor incididunt 
ut labore et dolore magna 
aliqua. 


Markup 


«div class-'uk-panel"» 


4 Panel 


Lorem ipsum dolor sit 
amet, consectetur 
adipisicing elit, sed do 
eiusmod tempor incididunt 
ut labore et dolore magna 
aliqua. 


R Panel 


Lorem ipsum dolor sit 
amet, consectetur 
adipisicing elit, sed do 
eiusmod tempor incididunt 
ut labore et dolore magna 
aliqua. 


«h3 class-'"uk-panel-title"»«i class-z"uk-icon-*"»«/i»...«/h3» 


«/div» 


面板 /Panel 


50 


块 /Block 


通过 将 内 容 片 段 打包 成 拥有 不 同样 式 的 块 来 分 割 内 容 。 


元 素 添加 


Block 


Lorem ipsum dolor sit amet 
consectetur adipisicing elit 
sed do eiusmod tempor 
incididunt ut labore et dolore 
magna 


Markup 


«div class-"uk-block"» 


一 
NY 


饰 


使 用 不 同 的 背景 颜色 和 padding ， 添 加 以 下 类 中 的 一 个 就 行 了 。 当 两 个 连 
色 时 ，padding 会 自动 被 分 开 。 


有 相同 的 背景 


Class 
.Uk-block-default 
.Uk-block-muted 
.Uk-block-primary 


.Uk-block-secondary 


.uk-block 类 ， 就 和 


Lorem ipsum dolor sit amet 
consectetur adipisicing elit, 
sed do eiusmod tempor 
incididunt ut labore et dolore 
magna 


.«/div» 


添加 默认 的 背景 
添加 亮 背 景色 。 
添加 表示 着 重 的 背景 
添加 另 一 种 背景 色 ， 通 


色彩 


EE 使 用 这 个 组 件 了 。 


Lorem ipsum dolor sit amet 
consectetur adipisicing elit 
sed do eiusmod tempor 
incididunt ut labore et dolore 
magna 


描述 


; ` 


&, o 


通常 是 白色 或 类 似 的 颜色 。 


是 暗色 。 


续 的 块 拥 
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注意 为 了 在 有 色 的 块 中 恰到好处 地 显示 色彩 、border 和 其 他 元 素 ， 你 可 能 需要 使 用 
对 比 度 组 件 中 的 .uk-contrast X» 


Example 


Primary 


Lorem ipsum dolor sit amet 
consectetur adipisicing elit 
sed do eiusmod tempor 
incididunt ut labore et dolore 
magna 


Markup 


Lorem ipsum dolor sit amet 
consectetur adipisicing elit 
sed do eiusmod tempor 
incididunt ut labore et dolore 
magna 





Lorem ipsum dolor sit amet 
consectetur adipisicing elit 
sed do eiusmod tempor 
incididunt ut labore et dolore 
magna 


«div class-z"uk-block uk-block-primary"»...«/div» 


Padding 


为 块 添加 较 大 的 padding * 


Example 


块 /Block 


需 添加 一 个 .uk-block-large 类 。 你 还 可 以 使 用 
效果 组 件 中 的 .uk-padding-* 类 ， 来 设置 块 中 padding 。 
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Large 


Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, 
sed do eiusmod tempor 
incididunt ut labore et dolore 
magna. 


Markup 


Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, 
sed do eiusmod tempor 
incididunt ut labore et dolore 
magna. 


Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, 
sed do eiusmod tempor 
incididunt ut labore et dolore 
magna. 





«div class-"uk-block uk-block-large"»...«/div» 
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在 你 页 面 中 创建 文章 。 


用 法 


文章 组 件 由 文章 本 身 、 标 题 、 元 数据 (例如 发 布 时 间 、 所 属 栏目 、 作 者 等 ) 、 起 始 
段落 (摘要) 和 间隔 组 成 。 

Class 描述 
添加 这 个 类 来 定义 文章 组 件 。 通 常 你 需要 使 用 
&lt;article&gt; 元 素 。 


对 一 个 标题 添加 这 个 类 ， 来 创建 文章 标题 。 通 常会 
用 在 &lt;hi&gt; 元 素 中 。 


.uk-article 


.uk-article-title 


.uk-article-meta 向 包含 文章 元 数据 的 段落 添加 这 个 类 。 
.uk-article-lead 为 文章 起 始 段落 添加 这 个 类 ， 使 其 显得 突出 。 


对 &lt;hr&gt; 元 素 添加 这 个 类 ， 建 立 一 个 间隔 


.uk-article-divider 
使 文章 各 部 分 分 开 。 





示例 
niin 


黄 初 三 年 ， 余 朝 京师 ， 还 济 洛 川 。 古 人 有 言 ， 斯 水 之 神 ， 名 日 密 妃 。 感 末 玉 对 楚 王 
神女 之 事 ， 遂 作 斯 赋 ， MB: 


SUIE , AR, wal. GASE , kèit, SHW. SERENE FiS , ERÜEHREES, 其 
词 日 : 


RATA, SORE, SPA | HER , SES, ERU. BRAM , 车 殉 马 烦 。 尔 乃 税 驾 乎 甘 罕 ， 穆 驶 平 
芝 田 ， 凌 与 乎 阳 林 ， RES TORUM. TBG , ZEG. MURR, MAR. BÉ—BBAS, TIRE 
万 援 御 者 而 告 之 日 ; * 尔 有 痪 于 彼 者 乎 ? 彼 何 人 斯 ， 若 此 之 艳 也 !" 御 者 对 日 : "EHI EI SB, ESO. $5 
WECHUL,XIMERBUXREGD, ERAZ, 


继续 阅读 


Code 
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«article class-"uk-article"- 
«hi class-'"uk-article-title"»...«/hi1» 
«p class-"uk-article-meta"»...«/p» 
«p class-"uk-article-lead"»...«/p» 


«hr class-"uk-article-divider"'» 


«/article» 


评论 /Comment 


创建 评论 ， 比 如 文章 的 评论 。 


用 法 
评论 组 件 由 包含 头像 、 标 题 和 元 数据 的 评论 header 以 及 评论 主体 组 成 。 
Class 描述 
.Uk-comment 添加 这 个 类 定义 评论 组 件 。 
.Uk-comment-header 添加 这 个 类 创建 评论 header。 


.Uk-comment-avatar 添加 到 &lt;img&gt; 元 素 创 建 评论 者 的 头像 。 


.Uk-comment-title 添加 这 个 类 到 一 个 标题 元 素 中 ， 创 建 评论 的 标题 。 
.Uk-comment-meta 为 段落 添加 这 个 类 ， 创 建 评论 的 元 数据 。 
为 &lt;div&gt; 元 素 添加 这 个 类 ， 创 建 评论 主 


. uk-comment -body 


体 。 


示例 


p 


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
labore et dolore magna aliquyam erat, sed diam voluptua 


Code 


«article class-"uk-comment"» 
«header class-z"uk-comment-header"» 
«img class-"uk-comment-avatar" src="" alt=""> 
«h4 class-"uk-comment-title"2...«/h4» 
«div class-"uk-comment-meta"»...«/div» 
«/header» 
«div class-"uk-comment-body"»2...«/div» 
«/article» 


评论 列表 


添加 .uk-comment-list 类 到 一 个 &lt;ul&gt; 元 素 中 ， 创 建 一 个 评论 列表 。 你 
可 以 在 评论 列表 中 上 殴 套 任意 数量 的 &lt;ul&gt; AÑ ° 


示例 
Author 


Lorem ipsum dolor sit amet, consetetur sadipscing elitr. sed diam nonumy eirmod tempor invidunt ut 
labore et dolore magna aliquyam erat, sed diam voluptua 


Author 


Lorem ipsum dolor sit amet, consetetur sadipscing elitr. sed diam nonumy eirmod 
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua 


Code 
«ul class-"uk-comment-list"» 

<li> 
«article class="uk-comment">...</article> 
<ul> 

<li><article class="uk-comment">...</article></li> 

</ul> 

</li> 


<li><article class="uk-comment">...</article></li> 
</ul> 


色彩 调整 


添加 .uk-comment-primary 类 可 以 将 评论 样式 变 得 不 同 ， 例 如 把 管理 员 的 评论 设 
置 为 高 完 。 
l= 2U 


示例 
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Author 
12 days ago | Profile |# 


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
amet. 


Code 


«article class-"uk-comment uk-comment-primary"»...«/article» 


评论 中 的 二 级 导航 


使 用 二 级 导航 组 件 以 二 级 导航 栏 的 形式 展示 评论 的 元 数据 。 


示例 
Subnav as comment meta 
12daysago Profile  $ 
Code 


«ul class-"uk-comment-meta uk-subnav uk-subnav-line"» 
«ilk co A qe 
«/ul» 
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SN 


一 些 的 效果 类 集合 ， 它 们 可 以 用 来 风格 化 你 的 网 页 内 容 。 


py 
$5 


添加 uk- 多 类 到 一 个 块 元 素 中 ， 为 其 设置 一 个 最 大 宽度 并 将 网 页 的 主 
要 内 容 包 装 在 其 中 。 对 于 大 屏幕 采用 不 同 的 最 大 宽度 。 


居中 
人 ， 使 用 .uk-container-center 类 。 对 于 其 它 的 块 元 素 ， 你 需要 


erag 


Centered block element 


Code 


«div class="uk-width-medium-1-2 uk-container-center">...</div> 


浮动 与 清除 浮动 


浮动 是 创建 各 式 布局 的 基础 。 但 浮动 需要 清除 ， 否 则 在 最 坏 的 情况 下 需 ， 你 会 得 到 
一 个 杂乱 无 章 的 页 面 。 下 面 的 类 能 帮助 你 创建 基础 的 布局 。 


Class 概述 
Mk float lent 浮动 元 素 为 左 对 齐 
Ur oa right 浮动 元 素 为 右 对 齐 。 


. uk-clearfix 向 父 容 器 添加 这 个 类 来 清除 浮动 。 


Code 


«div class-'"uk-clearfix'» 
«div class-"uk-float-right"»...«/div» 
«div class-"uk-float-left"5...«/div» 
«/div» 


单独 的 用 来 格式 化 上 下 文 的 块 元 素 /New block formatting 
context 


代替 使 用 .uk-clearfix 类 ， 你 可 以 单独 创 M QE 
基于 你 的 设置 ， 你 可 以 对 其 进行 评估 哪 种 方式 更 加 适 


Class 概述 
nem 设置 overflow 为 hidden 来 创建 一 个 单独 的 用 来 格式 化 上 下 
i 文 的 块 元 素 。 

设置 display 为 table-cell 来 创建 一 个 单独 的 用 来 格式 化 上 
.uk-nbfc-alt m 


E A 5x A 
有 间距 地 将 图 片 与 其 他 元 素 (比如 文本 ) 对 齐 


Class 概述 
.Uk-align-left 向 左 浮动 元 素 ， 并 创建 右 侧 及 底部 的 间距 。 
.Uk-align-right 向 右 浮动 元 素 ， 并 创建 左 侧 及 底部 的 间距 。 
.Uk-align-medium-left 仅 影 响 宽度 768px 及 以 上 的 设备 。 
.Uk-align-medium-right 仅 影 响 宽度 768px 及 以 上 的 设备 。 
.Uk-align-center 居中 对 齐 元 素 ， 并 创建 底部 间距 。 


示例 
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Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et 
dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute irure 
dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla 
pariatur. Excepteur sint occaecat 
cupidatat non proident, sunt in culpa 


qui officia deserunt mollit anim id est laborum. 


Code 
«p class-"uk-clearfix"» 
«img class-"uk-align-medium-right" src="" alt=""> 
D 


重 直 对 齐 


将 对 象 重 直 对 齐 ， 你 必须 为 需要 对 齐 的 对 象 创建 一 个 父 容 器 。 
Class 概述 


.Uk-vertical-align 
.uk-vertical-align-middle 
.Uuk-vertical-align-bottom 


.uk-height-1-1 


示例 
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向 父 容器 添加 这 个 类 。 这 个 容器 需要 被 设 
定 一 个 高 度 。 


向 子 元 素 添 加 这 个 类 ， 使 内 容 居中 对 齐 。 
向 子 元 素 添加 这 个 类 ， 使 内 容 与 底部 对 


齐 。 


这 个 辅助 类 用 来 赋予 100% 的 高 度 
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amet. consectetur 
adipisicing elit 
Lorem ipsum dolor sit 
amet, consectetur 
adipisicing elit 
Code 


«div class-"uk-vertical-align"» 
«div class-"uk-vertical-align-middle"» 


«/div» 


«/div» 


«div class-"uk-vertical-align"» 
«div class-"uk-vertical-align-bottom'"- 


«/div» 
«/div» 


注意 需要 对 齐 的 元 素 需 要 有 一 个 宽度 或 最 大 宽度 ， 它 的 宽度 必须 比 父 容器 宽 忆 


居中 整个 页 面 

如 果 你 想 将 &lt;html&gt; 和 &lt;body&gt; oo 页 面 的 高 度 
.uk-height-1-1 类 便 派 上 了 用 场 。 创 建 错误 页 面 时 ， 这 是 非常 有 用 的 。 

Code 


«html class="uk-height-1-1"> 


<body class="uk-height-1-1"> 
«div class="uk-vertical-align"> 
«div class="uk-vertical-align-middle">...</div> 
</div> 
</body> 
</html> 


水 平 居中 


水 平 居中 你 的 网 页 内 容 ， 添 加 uk- text-center 类 到 父 容器 并 添加 
.Uk-container-center 类 到 子 元 素 。 这 是 由 于 响应 式 特 性 而 必须 这 样 的 。 


视窗 高 度 


添加 .uk-height-viewport 类 ， 就 可 以 创建 一 个 填充 整个 视窗 高 度 的 容器 ， 例 
如 用 于 全 屏 图 像 或 视频 。 


元 系 的 定位 


Ulkit 提 供 一 系列 的 类 去 定位 你 的 内 容 ， 而 无 须 更 改 你 自己 的 CSS。 


Class Description 
.Uk-position-top 将 元 素 绝对 定位 在 顶部 
.uk-position-top-left 将 元 素 绝 对 定位 在 左 侧 顶部 
.Uk-position-top-right 将 元 素 绝 对 定位 在 右 侧 顶部 
.Uk-position-bottom 将 元 素 绝 对 定位 在 底部 
.Uk-position-bottom-left 将 元 素 绝 对 定位 在 左 侧 底部 


.Uk-position-bottom-right 将 元 素 绝对 定位 在 右 侧 底部 
为 元 素 添 加 绝对 定位 ， 并 将 其 扩展 覆盖 其 


.Uk-position-cover 


.Uk-position-relative 为 元 素 添加 relative 定 位 方法 
.Uk-position-z-index 为 元 素 添 加 数值 为 1 的 z-index 属性 


响应 式 对 象 


在 Ulkit 中 ， 图 片 会 默认 地 自 适应 它 的 父 容器 。 如 果 你 想 将 响应 式 特性 应 用 于 媒体 元 
素 ， 比 如 视频 对 象 ， 只 需要 添加 下 面 的 美 中 的 一 个 。 
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Class 描述 


.Uk-responsive-width halo 
: 41589 55,8 16 e 


.uk-responsive-height Rd 
: E 4585 55,9 I o 


根据 父 容 器 的 宽度 调整 对 象 的 宽度 ， 保 持 对 象 原 


根据 父 容 器 的 高 度 调 整 对 象 的 高 度 ， 保 持 对 象 原 


NOTE 同样 ， 可 以 添加 .uk-responsive-width 类 名 到 iframe ， 此 iframe 需 要 


有 预 设 的 width 和 height 属 性 。 


Example 宽度 


IE DR E 





Example 高 度 


由 


Markup 





«video controls class-"uk-responsive-width"»«/video» 


«img class-"uk-responsive-height" src="" alt=""> 
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行内 的 SVG 


SVG 或 可 缩放 的 矢量 图 形 丨 的 很 棋 ， 上 比如 作为 LOGO 使 用 时 ， 无 论 是 缩放 还 是 用 于 
动画 ， 它 都 很 清晰 。 要 使 用 CSS 来 控制 SVG， 只 需要 为 图 片 标签 添加 

data-uk-svg 属性 。 这 可 以 将 SVG 转变 行内 元 素 ， 并 具有 所 有 属性 ， 包 括 ID、 
class ` width ` height 等 等 ， 你 可 以 通过 CSS 方便 地 控制 它 。 


Markup 


«img src-"my-image.svg" data-uk-svg» 


外 边 距 Margin 


添加 一 个 下 面 的 类 为 块 元 素 添加 外 边 距 。 


Class 描述 
.Uk-margin 为 一 个 段落 添加 相同 的 顶部 和 底部 外 边 距 。 
.Uk-margin-top 添加 顶部 外 边 距 。 
.Uk-margin-bottom 添加 底部 外 边 距 。 
.uk-margin-left 添加 左 侧 外 边 距 。 
.Uk-margin-right 添加 右 侧 外 边 距 。 
较 大 的 外 边 距 


使 用 一 个 下 面 的 类 来 为 块 元 素 添加 较 大 的 外 边 距 。 


Class 描述 Description 
.uk-margin-large 为 一 个 段落 添加 较 大 的 顶部 和 底部 外 边 距 。 
.Uk-margin-large-top 添加 较 大 的 顶部 外 边 距 。 


.Uk-margin-large-bottom 添加 较 大 的 底部 外 边 距 。 
.Uk-margin-large-left 添加 较 大 的 左 侧 外 边 距 。 
.Uk-margin-large-right 添加 较 大 的 右 侧 外 边 距 。 


较 小 的 外 边 距 
使 用 一 个 下 面 的 类 来 为 块 元 素 添加 较 小 的 外 边 距 。 


Class 描述 
.Uk-margin-small 为 一 个 段落 添加 较 小 的 顶部 和 底部 外 边 距 。 
.Uk-margin-small-top 添加 较 小 的 顶部 外 边 距 。 


.Uk-margin-small-bottom 添加 较 小 的 底部 外 边 距 。 


.Uk-margin-small-left 添加 较 小 的 左 侧 外 边 距 。 
.Uk-margin-small-right 添加 较 小 的 右 侧 外 边 距 。 
移 除 外 边 


添加 一 个 下 面 的 类 来 移 除 块 元 素 的 外 边 距 。 


Class 描述 
.Uk-margin-remove 移 除 全 部 外 边 距 。 
.Uk-margin-top-remove 移 除 顶部 外 边 距 。 
.uk-margin-bottom-remove 移 除 底部 外 边 距 。 


自动 外 边 距 Auto margin 
为 堆 到 的 多 个 元 素 间距 ， 例 如 ， 在 较 小 的 视 口中 堆 秋 显示 多 个 并 列 的 内 联 元 素 时 ， 


只 需要 添加 data-uk-margin 属性 到 它们 的 父 元 素 ， 即 可 自动 为 子 元 素 添加 the 
.uk-margin-small-top ° 


示例 


Button Button Button Button 
Button Button Button Button 


Button Button 


Code 
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<p data-uk-margin> 
«button classz"uk-button'»...«/button» 
«button classz"uk-button'»...«/button» 
«/p» 


注意 默认 情况 下 ，data 属 性 为 堆 又 的 元 素 添 加 .uk-margin-small-top 类 。 如 
果 需 要 添加 更 大 的 margin， 只 需要 添加 (cls:'.uk-margin-top') 选项 就 行 。 


Padding 
移 除 块 元 素 内 的 padding ， 添 加 以 下 类 中 的 一 个 就 行 了 。 

Class 描述 
.Uk-padding-remove 移 除 所 有 padding. 
.Uk-padding-top-remove 1$ R T 3f padding. 

. uk-padding-bottom-remove 移 除 底部 padding 
.Uk-padding-vertical-remove 移 除 顶部 和 底部 padding. 


Border 半径 


要 为 元 素 添加 圆 角 ， 添 加 .uk-border-rounded 即 可 。 要 使 用 圆 形 ， 添 加 
.uk-border-circle PPT ° 


Example 
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«img class-"uk-border-rounded" srcz"" alt=""> 
«img class-"uk-border-circle" srcz"" alt=""> 


为 了 增 大 平板 电脑 和 台式 机 下 标题 字体 的 大 小 ， 只 需 添 加 .uk-heading-large 
Xo 


示例 


Heading 


Code 


«hi class-"uk-heading-large"»...«h1» 


E e dx 


如 果 要 去 掉 链 接 的 默认 磊 色 ， 只 需 添加  .uk-link-muted ŽI AAR CIA 
* o 


示例 


Code 


«a class-"uk-link-muted"»...«a» 

«hi1 class-"uk-link-muted"»«a»...«a»«h1» 

«ul class-"uk-link-muted"» 
«li»«a»...«a»«/li» 
«li»«a»...«a»«/li» 


«li»«a»5...«a»«/li» 
«/ul» 


可 滚动 的 预 格式 化 文本 


添加 .uk-scrollable-text 类 设置 一 个 最 大 高 度 ， Wo 


对 预 格式 化 的 文本 是 非常 有 用 的 ， 它 可 以 让 你 的 代码 块 节省 更 多 的 空间 。 
示例 


<div class-"uk-grid"» 
<div class= "uk—widthmedium-1-2"> 
<div class-"uk-panel uk-panel-box uk-text-left”>... </div> 
Cf div? 
<div classe"uk-width-mnedium-1-2"» 
<div class-"uk-panel uk-panel-box uk-text-right”>... </div> 
Cf div? 
Cf div? 
<div class-"uk-grid"? 
<div classe" uk-width-medium-i-2"» 
<div class-"uk-panel uk-panel-box uk-text-center 5... </div> 
C div? 
<div class= uk-width-medium-1-2"» 
<div class-"uk-panel uk-panel-box uk-text-justify 5... </div> S 
Cf div? 


4 gem 


添加 .uk-scrollable-box 类 创建 一 个 具有 最 大 高 度 及 重 直 滚动 条 的 看 起 来 像 面 
板 的 盒子 。 它 可 以 包含 任何 类 型 的 内 容 。 


L) 


示例 


Category 1 
Category 2 
Category 2.1 
Category 2.2 
| Category 2.3 
Category 2 
Category 2 


Danatama DA 


3.1 
3.2 bi 


Code 


«div class-"uk-scrollable-box'» 
«ul class-'uk-list"» 
«li»«label»«input type-z'checkbox"»...«/label»«/li» 
«li»«label»«input type-z'checkbox"»...«/label»«/li» 
</ul> 
</div> 


溢出 容器 /Overflow container 

当 容 器 内 部 的 元 素 宽 度 超 过 了 容器 本 身 ， 只 需要 为 容器 的 &lt;div&gt; 元 素 添 
加 一 个 .uk-overflow-container 类 ， 就 能 为 容器 带 来 一 个 水 平方 向 的 滚动 条 。 
在 响应 式 网 页 中 处 理 表格 时 很 有 用 ， 因 为 表格 可 能 在 某 些 断 点 会 显得 过 于 宽大 。 
示例 


Table Heading Table Heading Table Heading Table Heading Table Heading Table Headin 


Table Data Table Data Table Data Table Data Table Data Table Data 
Table Data Table Data Table Data Table Data Table Data Table Data 
Table Data Table Data Table Data Table Data Table Data Table Data 
Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer 


Code 


«div class-"uk-overflow-container'"»...«/div» 


添加 这 些 类 中 的 一 个 改变 元 素 的 display 属性 。 


Class 
.uk-display-block 
.uk-display-inline 


.uk-display-inline-block 


Class 
. uk-hidden 
. uk-hidden-touch 
. uk-hidden-notouch 


.uk-invisible 


.Uuk-visible-hover 


.uk-visible-hover-inline 


Example 


x, Bi 


y 


Markup 


描述 
强制 将 元 素 改 变 成 块 元 素 。 
强制 将 元 素 改 变 成 内 联 元 素 。 
强制 将 元 素 改 变 成 内 联 块 元 素 。 


描述 
在 所 有 设备 上 隐藏 该 元 素 。 
在 触 控 设备 上 隐藏 
在 非 触 控 设 备 上 隐藏 
隐藏 该 元 素 ， 但 是 不 在 流量 上 删除 该 元 素 。 
ARE IG i. block 来 显示 隐藏 


的 内 容 。 将 这 个 类 添加 到 父 元 素 中 。 

& PE I display: pu block 来 
显示 隐藏 的 内 容 。 将 这 个 类 添加 到 父 元 素 
中 o 


«div class-'"uk-visible-hover"'"» 


«div class-"uk-hidden'"»5.. 


«/div» 


响应 式 可 见 性 


.«/div» 


你 可 以 在 特定 的 视 口 宽度 下 对 内 容 进 
的 进行 修改 。 由 于 不 同 设备 的 尺寸 变 
提 及 任何 具体 的 设备 名 称 。 


Class 


. uk-visible-small 
.Uuk-visible-medium 
.Uk-visible-large 
.uk-hidden-small 

. uk-hidden-medium 


.Uuk-hidden-large 


íT 


Small (手机 ) 


最 大 767 
可 见 Visible 
隐藏 Hidden 
隐藏 Hidden 
隐藏 Hidden 
可 见 Visible 
可 见 Visible 


得 越 来 


Medium (平板 ) 
768 到 959 


隐藏 Hidden 
可 见 Visible 
隐藏 Hidden 
可 见 Visible 
隐藏 Hidden 
可 见 Visible 


或 隐藏 。 通 过 设置 断 点 变量 可 以 很 容易 
越 模糊 ， 所 以 类 的 名 称 保持 通用 性 而 不 


Large (PC) 
960 以 上 


隐藏 Hidden 
隐藏 Hidden 
可 见 Visible 
可 见 Visible 
可 见 Visible 
隐藏 Hidden 


Flex 布局 


利用 Flexbox 的 力量 创建 广泛 的 布局 。 


这 个 组 件 使 用 了 Flexbox 一 一 一 个 比较 新 的 概念 ， 它 拥有 强大 的 布局 效果 。 
用 法 


若 要 使 用 这 个 组 件 ， 只 需要 添加 ,uk-flex 类 到 一 个 &lt;div&gt; 元 素 。 这 样 


将 会 创建 flex 容 器 。 默 认 地 ， 所 有 flex 条 目 都 会 左 对 齐 ， 并 被 赋予 一 致 的 高 度 和 宽 
度 o 

Example 

Markup 


«div class-"uk-flex'» 
«div»...«/div» 
«/div» 


行内 的 Flex 
默认 情况 下 ，flex 容 示 为 块 元 素 。 为 了 仍然 保持 按照 flexbox 模 型 对 其 内 容 进行 


布局 ， 并 赋予 其 行 元 素 的 行为 ， 需 要 用 到 .uk-flex-inline 类 来 替代 
uk-flex . 


你 可 以 添加 多 个 不 同 的 类 来 调整 flex 的 行为 。 


这 些 类 定义 flex 条 目的 水 平 或 重 直 对 齐 ， 并 赋予 它们 彼此 之 问 的 间距 。 


Class 描述 
.Uk-flex-center 添加 这 个 类 ， 水 平 居中 flex 条 目 
.Uk-flex-right 添加 这 个 类 ， 右 对 齐 flex 条 
Ue ue 添加 这 个 类 ， 顶 部 对 齐 flex 条 目 
.Uk-flex-middle 添加 这 个 类 ， 重 直 居 中 flex 条 和 目 
.Uk-flex-bottom 添加 这 个 类 ， 底 部 对 齐 flex 条 目 


添加 这 个 类 ， 使 得 条 目 均 匀 分 布 ， 第 一 个 条 目 
在 主轴 的 开头 ， 最 后 一 个 条 目 在 主轴 的 末尾 。 


添加 这 个 类 ， 使 得 条 目 均匀 分 布 ,使 每 个 条 目 具 
有 相同 的 左右 空间 。 


.Uk-flex-space-between 
.Uk-flex-space-around 
Example 


Box 


Markup 


«div class-"uk-flex uk-flex-middle uk-flex-space-between'»...«/div: 


DENM LA 


方向 
这 些 类 用 于 定义 flex 主 轴 的 方向 。 默 认 地 ，flex 条 目 按 照 水 平 从 左 到 右 的 方向 放置 。 


Class 描述 
.Uk-flex-row-reverse 添加 这 个 类 ， 使 flex 条 目 从 右 到 左 排 列 。 
.Uk-flex-column 添加 这 个 类 ， 使 ex 条 目 垂直 排列 成 一 列 。 


.uk-flex-column-reverse 添加 这 个 类 ， 使 flex 条 目 从 下 到 上 排列 。 


Example 


Co 


Markup 


«div class-"uk-flex uk-flex-column uk-flex-column-reverse"».. 


E — —] 


换行 


默认 情况 下 ，flex 条 目 将 它们 自身 拟 合 到 一 行 中 。 添 加 

一 行 。 要 改变 条 目的 方向 ， 使 它们 从 右 到 左 排 列 ， 添 加 
类 即 可 。 下 面 这 些 类 用 来 修饰 换行 的 flex 条 目的 对 齐 属 

.uk-flex-nowrap 类 即 可 。 


目 不 再 匹配 视 口 时 切换 到 郧 

.uk-flex-wrap-reverse 

性 。 强 制 将 flex 条 目 放 入 一 行 ， 添 加 
Class 
.uk-flex-wrap-top 


.Uuk-flex-wrap-middle 


.Uk-flex-wrap-bottom 


.Uk-flex-wrap-space-between 


.Uk-flex-wrap-space-around 


Example 


.</di\ 





.uk-flex-wrap 类 ， 使 条 


描述 


这 个 类 ， 使 多 行 flex 条 目 对 齐 到 顶 


添加 这 个 类 ， 使 多 4 


这 个 类 ， 使 多 行 


fflex 条 目 重 直 居 中 。 
flex & A xt 3-5] JÀ. 


添加 这 个 类 ， 使 条 目的 行 均匀 分 布 ， 
一 行 在 容器 顶部 ， 最 后 一 行 在 容器 底 
部 。 


添加 这 个 类 ， 是 条 目的 行 均匀 分 布 ， 每 
一 行 都 有 一 样 的 空间 。 


Cc 
eo 


Co 
> 


Markup 


«div class="uk-flex uk-flex-wrap uk-flex-wrap-reverse uk-flex-wrap: 


四 El: 





条 目 排序 


默认 地 ，flex 条 目 根据 源码 的 顺序 排列 。 要 将 某 个 元 素 作 为 第 一 个 或 者 最 后 一 个 进 
行 显示 ， 只 需要 添加 下 列 类 名 中 的 一 个 。 


Class EU 
.uk-flex-order-first 将 此 条 目 显示 为 第 一 个 
.Uk-flex-order-last 将 此 条 目 显 示 为 最 后 一 个 


.Uuk-flex-order-first-small 


.uk-flex-order-last-small | 作用 于 视 口 宽度 480px 以 上 设备 。 || 

.Uk-flex-order-first-medium ^ .uk-flex-order-last-medium | 作用 于 视 
口 宽度 768px 以 上 设备 。 || .uk-flex-order-first-large 

.uk-flex-order-last-large | 作用 于 视 口 宽度 960px 以 上 设备 。 || 

.Uk-flex-order-first-xlarge  .uk-flex-order-last-xlarge | 作用 于 视 
口 宽度 1220px 以 上 设备 。 | 


Example 
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Markup 


«div class-"uk-flex'» 
«div class-"uk-flex-order-first"»...«/div» 
«/div» 


条 目的 规模 
要 确定 一 个 flex 条 目 需要 占用 多 大 的 空间 ， 为 条 目 添 加 以 下 类 中 的 一 个 即 可 。 


Class Description 
.Uk-flex-item-none 由 内 容 决 定 其 尺寸 
.Uk-flex-item-auto 按 条 目的 内 容 分 配 空间 
.Uk-flex-item-1 空间 分 配 完全 基于 Flex 


Flex 与 网 格 


Flex 组 件 可 以 与 网 格 组 合 使 用 。 


Example 


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem 
ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor 
了 四 sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, 
consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur 
adipisicing elit. 
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覆盖 /Cover 


扩展 图 片 或 视频 至 覆盖 整个 容器 。 


这 个 组 件 允 许 你 使 用 图 片 、 对 象 甚 至 iframe (images, objects or even iframes) 来 
创建 全 屏 效 果 。 无 论 是 什么 元 素 ， 它 都 将 垂直 居中 、 水 平 居中 并 且 不 会 失去 原 有 的 
比例 即 实现 覆盖 它 的 容器 。 你 还 可 以 在 图 片 或 者 视频 上 面 放 入 附加 内 容 ， 比 如 文字 
或 图 片 等 。 





用 法 
这 个 覆盖 组 件 具有 不 同 的 用 法 ， 取 决 于 你 究竟 是 使 用 的 背景 图 片 、 对 象 或 者 


iframe。 最 简单 的 方式 就 是 为 带 有 背景 图 片 的 &lt;div&gt; 元 素 添 加 
.Uk-cover-background 类 。 


Example 





Markup 


«div classz"uk-cover-background"»...«/div» 


视频 


A x Cover 78 


创建 一 个 覆盖 它 的 父 容器 的 视频 ， 添 加 .uk-cover-object 类 到 视频 。 然 后 用 一 
个 容器 元 素 包 衰 视频 并 为 该 容器 添加 ,uk-cover 类 来 裁剪 内 容 。 
Example 
Markup 
«div class-'uk-cover'» 
«video class-"uk-cover-object" widthz"" height=""> 
«source srcz"" type=""> 
«/video» 
«/div» 
Iframe 


要 将 履 盖 组 件 应 用 到 iframe ， 你 只 需要 为 iframe 添加 data-uk-cover 属性 。 然 
后 ， 再 添加 .uk-cover 类 到 包 爹 iframe 的 容器 来 裁剪 内 容 。 


Example 





Markup 


«div class-"uk-cover"'» 
«iframe data-uk-cover srcz"" widthz"" heightz"" frameborder="0' 


«/div» 


«| — RS 








为 覆盖 图 片 添加 响应 式 行为 ， 你 需要 添加 .uk-invisible 类 到 &lt;img&gt; 
元 素 ， 并 将 它 放 在 禾 盖 元 素 内 部 。 这 样 的 话 ， 它 就 能 适应 图 片 的 响应 式 行为 了 。 


注意 添加 中 的 .uk-height-viewport 类 ， 会 扩展 父 容器 的 高 度 十 满 
Edu o 

Example 

Markup 


«div class-"uk-cover-background"» 
«img class-"uk-invisible" srcz"" widthz"" heightz"" alt=""> 


«/div» 
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~ 


视频 


为 视频 添加 响应 式 行为 ， 你 同样 需要 为 覆盖 容器 添加 .uk-position-relative 
类 ， 并 将 ,uk-position-absolute 类 添加 到 和夫 盖 对 象 上 。 对 于 irame 也 是 这 样 操 
作 。 


Example 
Markup 
«div class-"uk-cover uk-position-relative"> 
«img class-z"uk-invisible" src="" widthz"" heightz"" alt=""> 
«video class-'uk-cover-object uk-position-absolute" width="" ht 
«source srcz"" type=""> 
«/video» 
«/div» 


BN uM BE 





` 


内 容 的 定位 /Position content 

你 还 能 在 覆盖 元 素 上 面 绝对 定位 内 容 。 要 实现 这 个 效果 ， 只 需 添加 效果 组 件 中 的 
.Uk-position-cover 类 到 图 片 或 视频 后 面 的 容器 元 素 。 如 果 想 要 实现 重 直 居中 

并 且 水 平 居中 ， 那 就 使 用 Flex 组 件 吧 。 


Example 


Fs 


Bazinga! 
SI 





Markup 
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«div class-"uk-cover-background uk-position-relative"» 
«img class-'"uk-invisible" srcz"" widthz"" height="" alt=""> 
«div class-"uk-position-cover uk-flex uk-flex-center uk-flex-m: 
«/div» 


d — — HB 








为 列表 导航 菜单 定义 不 同 的 风格 样式 。 


用 法 


使 用 这 个 组 件 ， 添 加 .uk-nav 类 到 一 个 &lt; ul&gt; 元 素 中 。 使 用 
&lt;a&gt; 元 素 作为 列表 中 的 菜单 项 。 。 要 对 一 个 菜 单项 应 用 选中 状态 的 效果 ， 添 
加 .uk-active 类 即 可 。 


示例 


Active 


Item 


Item 


注意 默认 情况 下 ， 导 航 菜 单 没 有 任何 样式 。 这 就 是 为 什么 要 添加 一 些 具有 样式 的 修 
饰 类 ， 这 是 很 重要 的 ， 在 例子 中 我 们 使 用 了 .uk-nav-side Xe 


Code 


«ul class-"uk-nav"» 
«li»«a hrefz""»...«/a»«/li» 
«li class-"uk-active"»«a href="">, ..</a></li> 


«/ul» 
ES 
你 可 以 很 容易 向 菜单 导航 添加 任意 数量 的 &lt;ul&gt; 元 素 。 

Class 描述 
在 第 一 个 谣 套 的 &lt,ul&gt; 中 添加 这 个 类 ， 使 

.Uk-nav-sub i / / 

d 其 拥有 最 佳 的 间距 。 

.Uk-parent 添加 这 个 类 来 表示 一 个 父 菜 单项 。 


给 导航 菜单 添加 这 个 类 ， 可 以 使 父 菜 单项 增加 图 


.Uk-nav-parent-icon i 
标 。 
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示例 


Code 


«ul class-"uk-nav uk-nav-parent-icon"» 
«li class-"uk-parent"»«a hrefz'"'"»...«/a» 
«ul class-"uk-nav-sub"» 
<li><a href="">. ..</a> 
«ul»...«/ul» 


</li> 
</ul> 
«/li» 
«/ul» 
手风琴 


默认 情况 下 ， 子 菜单 项 总 是 可 见 的 。 若 要 应 用 手 风 酉 效果 ， 只 需 给 主 

&lt;ul&gt; 元 素 添 加 data-uk-nav 属性 。 当 点 击 一 个 父 菜 单项 时 ， 会 关闭 已 
经 展开 的 菜单 项 ， 每 次 只 允许 展开 一 个 获 套 的 菜单 。 若 要 避免 这 种 情况 ， 只 需 附 加 
(multiple:true) 到 data 属性 。 


示例 
data-uk-nav data-uk-navs"(multiple:true]" 
Item Item 
Parent € Parent < 
Parent < Parent < 
Code 


导航 菜单 85 


«ul class-z"uk-nav uk-nav-parent-icon" data-uk-nav» 
«li class-"uk-parent"» 
«a href="">, ..</a> 
<ul class="uk-nav-sub"> 
<li><a href="">. ..</a></li> 
<li><a href="">. ..</a></li> 
</ul> 
</li> 
</ul> 


«ul class="uk-nav uk-nav-parent-icon" data-uk-nav="{multiple:true}' 


<li class="uk-parent"> 
<a href="">, ..</a> 
«ul class="uk-nav-sub"> 
<li><a href="">., ,.</a></li> 
<li><a href="">. ..</a></li> 
</ul> 
</li> 
</ul> 


s 一 —À 





标题 和 分 隔 线 
为 菜单 项 添加 下 面 这 些 类 中 的 一 个 ， 创 建 菜单 项 中 的 标题 或 分 隔 线 
Class 描述 
.Uk-nav-header 添加 这 个 类 到 一 个 &lt;li&gt; 元 素 创 建 一 个 标题 。 


.uk-nav-divider 项 之 间 创 建 一 个 分 割 线 。 


注意 你 还 可 以 给 菜单 项 添加 副标题 。 只 需 在 菜单 项 的 &lt;a&gt; 


一 个 &lt;div&gt; 元 素 。 


示例 


添加 这 个 类 到 一 个 &lt;li&gt; 元 素 ， 在 单独 的 菜单 


元 素 里 面 创建 


Code 


<li class-"uk-nav-header"»...«/li» 
«li class-"uk-nav-divider"»«/li» 


样式 修 4 
这 里 有 一 些 修饰 类 ， 根 据 使 用 对 象 的 上 下 文 赋予 导航 菜单 适当 的 样式 。 


侧 边 栏 导航 菜 


添加 .uk-nav-side 类 ， 将 导航 菜单 放置 到 侧 边 栏 、 面 板 或 者 网 页 中 任意 其 他 位 
E 


Example 


Nav side in panel 


Parent < 
Parent < 


ltem 


HEADER 
É Parent < 
y item 


A Item 


Markup 


<div class="uk-panel uk-panel-box"> 

<h3 class="uk-panel-title">...</h3> 

«ul class="uk-nav uk-nav-side">...</ul> 
</div> 


TH RA 


添加 .uk-nav-dropdown 类 ， 将 导航 菜单 放置 到 一 个 下拉 菜 单 组 件 中 的 默认 下 
RŽP o 


示例 


Té 
Item 
Another item 
Item 
Another item 


Separated item 


Code 


«div class-'"uk-dropdown"» 
«ul class-"uk-nav uk-nav-dropdown"»...«/ul» 
«/div» 


添加 .uk-nav-navbar 类 ， 将 导航 菜单 放置 到 一 个 导航 栏 组 件 中 的 导航 栏 下 拉 
菜单 中 。 


示例 


Item 


Another item 
lown-navbar"? 


bar >.. </ul> 


Item 


Another item 


Separated item 


Code 


«div class-"uk-dropdown uk-dropdown-navbar"» 
«ul class-"uk-nav uk-nav-navbar'»...«/ul» 
«/div» 
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添加 .uk-nav-offcanvas 类 ， 将 导航 菜单 放置 到 抽 层 组 件 里 的 侧 边 栏 弹出 式 画 
布 中 。 


示例 


Item 


Active 


Parent 


Parent 


Item 


* Parent 


WB item 


A Item 





Code 


<div class="uk-offcanvas-bar"> 
«ul class="uk-nav uk-nav-offcanvas"»...«/ul» 
«/div» 


导航 栏 


为 导航 栏 定义 不 同 风格 的 样式 。 


用 法 


导航 栏 组 件 包括 导航 栏 本 身 及 一 个 或 多 个 导航 菜单 。 


Class 


.Uk-navbar 


.Uk-navbar-nav 


.Uk-active 


.Uk-parent 


示例 


Active Item Parent 


Code 


描述 


添加 这 个 类 到 &lt;navagt; 元 素 中 ， 定 义 导 航 栏 组 
件 。 


添加 这 个 类 到 &lt;ul&gt; 元 素来 创建 导航 。 使 用 
&lt;a&gt; 元 素 作 为 列表 中 的 菜单 项 。 


添加 这 个 类 到 一 个 列表 项 中 ， 对 其 应 用 选中 的 状态 。 


添加 这 个 类 来 表示 一 个 父 级 菜单 项 。 


«nav class-"uk-navbar'» 
«ul class-z"uk-navbar-nav"» 
«li class-"uk-active"'"»«a href="">. ..</a></li> 
«li»«a hrefz'""»...«/a»«/li» 
«li class-'uk-parent"»«a hrefz'"'"»...«/a»«/li» 


«/ul» 
«/nav» 


寻 航 栏 翻转 


添加 .uk-navbar-flip 类 到 一 个 &lt;div&gt; 
航 项 对 齐 到 导航 栏 右 侧 。 


元 素 中 ， 将 其 进行 分 组 并 


4 


4 


示例 


Active Item Parent Parent 


Code 


«nav class-"uk-navbar'» 
«div class-"uk-navbar-flip"» 
«ul class-"uk-navbar-nav"» 
<li><a hrefz"'""»...«/a»«/li» 
«/ul» 
«/div» 
«/nav» 


寻 航 栏 副 标题 


为 列表 项 中 的 &lt;a&gt; 
副标题 。 使 用 &lt;div&gt; 


元 素 添 加 .uk-navbar-nav-subtitle 
元 素 作 为 副标题 本 身 。 


示例 


Parent 
Subtitle 


Item 


RESİ Subtitle 


Code 


<nav class="uk-navbar"> 
«ul class="uk-navbar-nav"> 
<li><a href="" class="uk-navbar-nav-subtitle"> 


<div>. ..</div> 
</a></li> 
</ul> 
</nav> 


P 


类 来 表示 一 个 


你 还 可 以 在 导航 栏 中 添加 自 定义 的 内 容 ， 如 文本 、 图 标 、 按 钮 、 表 单 ， 甚 至 是 一 个 
拨 动 器 。 默 认 情 况 下 ， 拨 动 器 并 没有 附属 JavaScript。 举 例 来 说 ， 可 以 为 导航 栏 添 
加 一 个 抽 屋 组 件 。 


Class 描述 


添加 这 个 类 到 &lt;div&gt; 元 素 中 ， 使 它 作 
为 一 个 自 定义 内 容 的 容器 。 内 容 将 被 重 直 居中 。 
添加 这 个 类 到 一 个 &lt;a&gt; 或 
&lt;div&gt; 元 素 中 ， 来 表示 你 的 品牌 。 
添加 这 个 类 来 居中 你 的 导航 栏 内 容 或 品牌 。 该 元 
素 必 须 为 导航 栏 的 最 后 一 个 子 元 素 。 
添加 这 个 类 到 一 个 &lt;a&gt; 或 
.Uk-navbar-toggle &lt;div&gt; 元 素 中 ， 创 建 一 个 作为 拨 动 开 
关 的 图 标 。 


.Uk-navbar-toggle-alt 添加 这 个 类 来 蔡 换 拨 动 开关 默认 的 图 标 。 


.Uk-navbar-content 
.Uk-navbar-brand 


.Uk-navbar-center 


示例 


Brand $i Level Some link Se 
LinK Button 


Active Item Parent Center Parent Item Active 
Code 


«nav class-"uk-navbar'» 
«a hrefz"" class-z'"uk-navbar-brand"»...«/a» 
«ul class-z"uk-navbar-nav"»...«/ul» 
«div class-"uk-navbar-content"»...«/div» 
«div class-"uk-navbar-content uk-navbar-center"»...«/div» 
«a hrefz"" class-'"uk-navbar-toggle"»«/a» 
«/nav» 


响应 式 可 见 性 


要 隐藏 或 显示 导航 栏 中 的 某 些 项 目 ， 只 需 添加 效果 组 件 中 的 响应 式 可 见 性 类 。 这 
是 非常 方便 的 ， 比 如 你 想 在 移动 设备 中 使 用 一 个 拨 动 器 来 触发 导航 。 


示例 
调整 你 的 浏览 器 窗口 大 小 可 以 看 到 它 是 怎么 运行 的 。 

Active tem Parent Parent Item Active 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr. 


Code 


«nav class-"uk-navbar'» 

«ul class-z"uk-navbar-nav uk-hidden-small"»...«/ul» 

«a hrefz'"Zmy-id" class-"uk-navbar-toggle uk-visible-small" dat: 
«/nav» 


«div id-"my-id" class-"uk-offcanvas"» 


«/div» 





注意 在 这 个 示例 中 ， 我 们 从 折 屋 组 件 中 添加 了 一 个 侧 边 栏 抽 屋 。 


一 
NY 


饰 


为 了 以 不 同 的 风格 显示 导航 栏 


» 


只 需 添加 修饰 类 。 这 些 修 饰 类 可 以 相互 组 合 使 用 。 


附着 式 的 导航 栏 


添加 .uk-navbar-attached 类 来 优化 附 到 视图 顶部 的 导航 栏 样式 。 比 如 移 除 圆 
角 o 


示例 


Active Item Parent Parent Item Active 


Code 


«nav class-"uk-navbar uk-navbar-attached"»...«/nav» 


带 有 下 拉 菜 单 的 导航 棋 


导航 栏 可 以 包含 下 拉 菜 单 组 件 中 的 下 拉 菜 单 。 只 需 添 加 .uk-dropdown-navbar 
修饰 类 到 下 拉 菜 单 中 ， 它 可 以 完美 的 融入 到 导航 栏 的 样式 中 。 


示例 


Active Item Parent * 


Item 


Another item 


tem 


Another item 


GitHub | Separated item 





二 级 导航 
为 二 级 导航 设置 不 同 的 样式 风格 
用 法 


使 用 以 下 类 名 来 应 用 这 个 组 件 。 对 齐 一 个 二 级 导航 ， 比 如 水 平 居中 ， 你 可 以 使 用 
Flex 组 件 。 


Class 描述 
添 类 : ， 元 yd A 
ES 大 加 此 类 名 到 &lt;ul&gt; AP? 3RERDRNE 
&lt;a&gt; 元 素 。 
.UKk-active 为 列表 条 目 添加 此 类 名 ， 使 其 呈现 选中 状态 。 
.UK-disabled 为 列表 条 目 添 加 此 类 名 ， 使 其 呈现 禁用 状态 。 
Example 
Item Item item 
Markup 


«ul class-z"uk-subnav"» 
«li class-'"uk-active"'"»«a hrefz"'"»,...«/a»«/li» 
<li><a hrefz"'""»...«/a»«/li» 
«li class-'"uk-disabled"»«a href="">., ..</a></li> 
«/ul» 


二 级 导航 的 分 隔 线 


添加 .uk-subnav-line 类 名 ， 用 线条 将 菜单 条 目 分 隔 开 。 


Example 


Markup 


«ul class-"uk-subnav uk-subnav-line"'"» 
«li»...«/li» 
«/ul» 


二 级 导航 弹 九 


添加 .uk-subnav-pill 类 名 ， 使 选中 状态 的 菜单 条 目 拥有 背景 色 
条 目 添加 .uk-active 类 名 ， 就 能 让 它 呈 现 选中 的 状态 。 


5o 
38 
ox 
ps 


Example 
| item | Item Item 


Markup 


«ul class-"uk-subnav uk-subnav-pill'"» 
«li class-"uk-active"'»...«/li» 
«/ul» 


带 下 拉 菜 单 的 二 级 导航 


这 个 例子 展示 了 如 何 使 用 带 有 下 拉 菜 单 的 二 级 导航 。 


Example 


Item 
| Markup ii 
Another item 
<ul class="uk-subnav”> 
<li><a href="">... /a»€/1i? 
Item 


<li data-uk-dropdown-" [node Another item 
人 一 EI TAREA Separated item 
<a href2" "5... fa» 


Markup 


«ul class-"uk-subnav"» 
<li><a href="">. ..</a></li> 
<1-- 这 是 启用 JavaScript 的 容器 --> 
«li data-uk-dropdownz" (mode: 'click'}"> 


<1-- 这 是 拨 动 下 拉 菜 单 的 导航 项 - -> 
«a hrefz'"'"»,.,,«/a» 


<!-- 这 是 下 拉 菜 单 --> 

«div class-"uk-dropdown uk-dropdown-small"- 
«ul class-'"uk-nav uk-nav-dropdown"- 

<li><a href="">. ..</a></li> 

</ul> 

</div> 

</li> 
</ul> 


& 6 /Breadcrumb 


创建 面包 屑 导航 ， 显 示 用 户 在 网 站 中 的 位 置 。 


用 法 
面包 居 组 件 由 并 排 排列 的 链接 和 链接 与 链接 直接 的 间隔 组 成 。 


类 Class 描述 Description 


在 &lt;ul&gt; 元 素 中 添加 这 个 类 定义 面包 屑 组 件 。 使 
用 &lt;a&gt; 元 素 作 为 列表 中 的 面包 悄 项 目 。 


在 列表 项 中 添加 这 个 类 ， 对 其 中 一 个 应 用 一 个 选中 的 状 
.Uk-active 态 ， 并 且 使 用 &lt;span&gt; 替代 &lt;a&gt; AAPP 
可 o 


.uk-breadcrumb 


使 用 一 个 &lt;span&gt; 替代 &lt;a&gt; AŽ ^ FLORE X m ^H 
示例 


Home / Blog / | Post 


Code 


«ul class-"uk-breadcrumb"- 

<li><a href="">. ..</a></li> 

<li><a href="">. ..</a></li> 

<li><span>. ..</span></li> 

«li class="uk-active"><span>. ..</span></li> 
</ul> 


轻松 创建 一 个 美观 的 分 页 导航 来 浏览 网 页 。 


分 页 组 件 由 类 似 按 钮 风格 的 链接 并 排 排 列 组 成 。 


类 概述 


将 这 个 类 添加 到 一 个 &lt;ul&gt; 元 素 ， 定 义 分 页 寻 
.Uk-pagination 航 组 件 。 使 用 &lt;a&gt; 元 素 作为 分 页 导航 列表 中 的 
项 目 o 


将 这 个 类 添加 到 一 个 列表 项 ， 对 其 应 用 选中 的 状态 ， 使 
用 &lt;span&gt; 替代 &lt;a&gt; 元 素 。 


将 这 个 类 添加 到 一 个 列表 项 ， 对 其 应 用 禁用 状态 ， 使 用 
&lt;span&gt; 替代 &lt;a&gt; 元 素 。 


.Uk-active 
.Uk-disabled 


要 应 用 一 个 无 样式 的 省 略 号 ， 只 需 使 用 &lt;span&gt; XX &lt;a&gt; 元 
素 。 


示例 


Code. 


«ul class-"uk-pagination"» 
<li><a hrefz'"»...«/a»«/li» 
«li class-'uk-active"»«span»...«/span»«/li» 
«li class-"uk-disabled"»«span»...«/span»c/li» 
<li><span>. ..</span></li> 

</ul> 


向 页 码 添 加 .uk-pagination-left 或 .uk-pagination-right 类 使 其 向 左 或 
者 向 右 对 齐 。 


示例 
1 8 9 11 12 20 1 8 9 11 12 20 


Code. 


«ul class-"uk-pagination uk-pagination-left"> 
< e lu 
</ul> 


«ul class-"uk-pagination uk-pagination-right"> 
«li»...«/li» 
</ul> 


Wo | 


创建 一 个 简单 上 一 页 和 下 一 页 分 页 导航 是 非常 容 钨 的。 只 需 添加 
.uk-pagination-previous 或 .uk-pagination-next 类 到 一 个 


&lt;li&gt; 元 素 ， 其 向 左 或 者 向 右 对 齐 。 
示例 


«上 一 页 下 一 页 > 


Code. 


«li class-"uk-pagination-previous"»«a href="">.,.</a></]i> 
«li class-'"uk-pagination-next"»«a hrefz'""»,...«/a»«/li» 


带 图 标的 分 页 导航 


使 用 图 标 组 件 中 的 图 标 增 强 分 页 导航 效果 。 添 加 一 个 .uk-icon-* 类 到 分 页 寻 
航 链 接 里 的 &lt;i&gt; 或 &lt;span&gt; 元 素 中 。 


示例 
B 
Code. 


<li><a href=""><i class-"uk-icon-angle-double-left"»«/i»«/a»«/li» 
<li><a href=""><i class-"uk-icon-angle-double-right"»«/i»«/a»«/li» 


Aoo Bg 


JavaScript 


你 可 以 应 用 附加 组 件 中 的 分 页 组 件 来 自动 计算 页 码 ， 例 如 在 由 Ajax 支持 的 列表 视图 
中 触发 一 个 事件 ， 动 态 地 加 载 新 的 列表 项 。 


选项 卡 


创建 拥有 不 同样 式 的 选项 卡 导航 。 


用 法 
选项 卡 组 件 由 一 些 并 列 的 可 点 击 选项 卡 标签 组 成 。 


Class X 描述 


添加 这 个 类 到 一 个 &lt;ul&gt; 元 素 中 定义 一 个 选项 卡 
组 件 。 在 列表 中 使 用 &ltia&gt; 元 素 作 为 选项 卡 标签 。 


.uk-active 添加 这 个 选项 卡 标签 ， 赋 予 选 中 状态 。 


.uk-tab 


.uk-disabled 添加 这 个 类 到 选项 卡 标签 ， 赋 巴林 用 状态 。 


data-uk-tab 属性 为 两 个 目的 提供 支持 。 其 一 ， 它 使 得 响应 式 行为 成 为 可 能 。 如 
果 父 容器 太 小 而 不 外 容纳 所 有 的 选项 卡 标签 ， 它们 将 会 人 一 个 下 村 菜单 中 ， 并 
由 一 个 独立 的 默认 选项 卡 作 为 拨 动 器 。 这 里 就 需要 用 到 TH 菜单 组 件 了 。 


第 二 ， 它 的 功能 耦合 了 切换 器 组 件 ,这 是 使 用 选项 卡 导 航 切 换 不 同 内 容 所 必须 的 。 


示例 


Active Item Item 


Code 


«ul class-z"uk-tab" data-uk-tab» 
«li class-'"uk-active"'"»«a hrefz"'"»,...«/a»«/li» 
«li»«a hrefz'""»...«/a»«/li» 
<li><a hrefz""»...«/a»«/li» 
«li class-'"uk-disabled"»«a href="">. ..</a></li> 
«/ul» 


水 平方 向 的 修饰 


添加 下 列 类 中 的 一 个 ， 用 来 改变 选项 卡 的 外 观 。 这 些 修饰 类 可 以 组 合 使 用 。 


选项 卡 的 对 齐 


Class ž 描述 
Mik ea i 添加 这 个 类 ， 使 选项 卡 右 对 齐 ， 并 翻转 排列 顺序 。 


.Uk-tab-bottom m m E: 
部 。 这 个 类 也 能 和 其 他 类 组 合 使 用 。 


示例 


Item item Active Active item item 


Code 


«ul class-"uk-tab uk-tab-flip" data-uk-tab»...«/ul» 
«ul class-"uk-tab uk-tab-bottom" data-uk-tab»...«/ul» 


调整 选项 卡 标签 


添加 .uk-tab-grid 类 和 一 个 网 格 组 件 中 的 .uk-width-* 类 ， 把 选项 卡 标 


放 入 网 格 中 ， 使 它 的 宽度 与 父 元 素 宽 度 一 致 。 


示例 


Active Item Item 


Code 


«ul class-z"uk-tab uk-tab-grid uk-tab-bottom" data-uk-tab» 
«li class-'uk-width-1-3"»«a hrefz'""»...«/a»«/li» 
</ul> 


添加 这 个 内 到 &lt;ul&gt; ， 将 选项 卡 标签 放 在 底 


A 


添加 .uk-tab-center 类 到 包含 选项 卡 的 &lt;div&gt; 元 素 中 ， 使 选项 卡 居 
中 o 


示例 


Active tem tem 


Code 


«div class-"uk-tab-center"» 
«ul class-"uk-tab" data-uk-tab»...«/ul» 
«/div» 


垂直 方向 的 修 4 


添加 .uk-tab-left 3X .uk-tab-right 类 ， 将 选项 卡 放置 在 左边 或 者 右边 。 


示例 
Active Active 
em em 
em tem 
Code 


«ul class-"uk-tab uk-tab-left uk-width-medium-1-2"» 
«li»...«/li» 
«/ul» 


«ul class-"uk-tab uk-tab-right uk-width-medium-1-2"» 
«li»...«/li» 
</ul> 


响应 式 行为 


在 狭 罕 的 视 口 中 ， 比 如 手机 ， 重 直 的 选项 卡 会 变 成 水 平 。 添 加 data-uk-tab 
性 将 为 水 平 排列 的 选项 卡 赋予 相同 的 响应 行为 。 


含有 下 拉 菜 单 的 选项 卡 


这 个 例子 是 关于 怎样 使 用 带 有 下 拉 菜 单 组 件 的 选项 卡 。 


示例 
Active Item Item More v 
Item 
| Code - 
Another item 
<ul classe" uk-tab"» 
<li><a href="">... C/a»/1 
Item 


<li datscuk-dropdown7" {me Another item 


DAD TRER Separated item 
<a href="">... fa) 


Code 


«ul class-"uk-tab"» 
«li»«a hrefz'""»,,..«/a»«/li» 


<1-- 关联 JavaScript 的 容器 --» 
«li data-uk-dropdownz" (mode: 'click'}"> 


<1-- 拨 动 下 拉 菜 单 的 元 素 --> 
auci; d 


<!-- 下 拉 菜 单 --> 

«div class="uk-dropdown uk-dropdown-small"-» 
«ul class-'"uk-nav uk-nav-dropdown"- 

<li><a hrefz"'"»...«/a»«/li» 

«/ul» 

«/div» 

</li> 
</ul> 


事件 
你 可 以 为 以 下 事件 绑 定 回调 ， 以 实现 自 定义 功能 : 


名 称 参数 描述 


change.uk.tab event, active item On tab item change 选项 卡 切 换 时 


缩 略 图 导航 /Thumbnav 


创建 可 以 使 用 Flex 进行 对 齐 的 弹性 缩 略 图 导航 。 


用 法 


要 使 用 这 个 组 件 的 话 ， 就 这 样 做 ， 添 加 ,uk-thumbnav 类 到 一 个 &lt;ul&gt; 
元 素 ， 然 后 将 缩 略图 识 套 在 列表 条 目 内 部 的 &lt;a&gt; 元 素 中 。 如 果 缩 略图 导 
航 比 它 的 容器 宽 ， 并 且 使 用 了 排水 沟 (gutter) 时 ， 添 加 .uk-active 类 创建 
active 状 态 。 


要 对 齐 子 导航 的 话 ， 比 如 使 它 水 平 居 中 ， 你 可 以 使 用 Flex。 


Example 
Markup 
«ul class-"uk-thumbnav'"» 
«li class-'"uk-active"»«a href=""><img src="" altz'"»2«/a»«/li» 
<li><a hrefz""»«img src="" altz'"»2«/a»«/li» 
«/ul» 


[E 


缩 略 图 导航 与 网 格 


你 可 以 使 用 网 格 组 件 中 的 .uk-grid-width-* 类 来 实现 在 同一 行 中 均匀 地 容纳 
缩 略 图 导航 条 目 。 


Example 


Markup 


«ul class-"uk-thumbnav uk-grid-width-1-5"> 
<li>...</li> 
</ul> 
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轻松 创 具有 不 同 风格 的 漂亮 丈 IL. 


用 法 


要 应 用 这 个 组 件 ， 添 加 ,uk-list 类 到 一 个 无 序 或 有 序列 表 即 可 。 这 时 列表 将 不 
显示 任何 间距 及 列表 样式 . 


示例 


List item 1 
List item 2 


List item 3 
code 


«ul class-"uk-list"» 
«1i»...«/li» 
«gcc 
lale secs Lag: 

«/ul» 


m 列表 显示 不 同 的 样式 ， 只 需 为 .uk-list 添加 修饰 类 。 列 表 组 件 的 修饰 类 不 
能 相互 组 合 使 用 . 


列表 线 
添加 .uk-list-line 类 线 分 割 列表 项 . 


示例 


List item 1 
List item 2 


List item 3 


code 


«ul class-"uk-list uk-list-line"'"»5...«/ul» 


列表 条 纹 


添加 .uk-list-striped 类 列表 条 纹 . 
示例 


List item 1 
List item 2 


List item 3 


code 


«ul class-"uk-list uk-list-striped"»...«/ul» 


列表 间距 


添加 .uk-list-space 类 增加 列 之 间 的 间距 . 


Example 
文 个 修饰 类 对 于 带 有 多 行文 本 的 列 
表 项 那 是 相当 地 有 用 


Lorem ipsum dolor sit amet 
consectetur adipisicing elit 


Ut enim ad minim veniam, quis 
nostrud exercitation ullamco 





code 


«ul class-"uk-list uk-list-space"»...«/ul» 
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描述 列表 

轻松 创建 具有 不 同 风格 的 漂亮 的 描述 列表 。 

用 法 

创建 描述 列表 并 不 需要 像 其 他 组 件 一 样 必须 用 到 某 个 类 ， 但 是 Ulkit 中 提供 了 一 些 
修饰 类 来 定义 不 同 风 格 样 式 的 描述 列表 。 描 述 列表 组 件 的 修饰 类 不 能 相互 组 合 使 
用 o 


T 85 48 37 |% 


添加 .uk-description-list-horizontal 类 使 术语 与 描述 并 排 显示 。 


示例 

描述 列表 

描述 列表 用 于 定义 术语 和 相应 的 描述 。 

描述 列表 摘 述 列表 用 于 定义 术语 和 相应 的 摘 述 。 

Lorem ipsum Dolor sit amet. consectetur adipisicing elit. sed do eiusmod tempor incididunt 


ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

iBERBRRU—T ELESEEKRS.. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
fugiat nulla pariatur 


Code 


«dl class-"uk-description-list-horizontal"- 
<dt>. ..</dt> 
<dd>. . .</dd> 

«/dl» 


响应 式 行为 


较 窜 的 视 口 中 ， 比 如 手机 ， 描 述 列 表 将 变 回 默认 的 堆肥 样式 。 


描述 列表 线 


添加 .uk-description-list-line 类 用 线条 分 隔 描述 列表 项 之 间 的 间距 。 


示例 


摘 述 列表 


Lorem ipsum 


Ut enim 


Code 


«dl class-"uk-description-list-line"»...«/dl» 


表格 


轻松 创建 具有 不 同 风格 的 漂亮 的 表格 。 


用 法 


要 应 用 这 个 组 件 ， 添 加 


隔 开 。 


示例 


Table Data 
Table Data 


SHE 


Code 


表格 标题 
Table Data 
Table Data 


Table Data 


<table class="uk-table"> 
<caption>. ..</caption> 


<thead> 


<tr> 


</tr> 
</thead> 


<tfoot> 


«tr» 


«/tr» 
«/tfoot» 


«tbody» 
«tr» 


</tbody> 
</table> 


eese gs 


..O«/td» 


«td»...«/td» 
«/tr» 


.Uk-table 类 到 一 个 table 元 素 。 表 格 的 各 行将 被 线条 


表格 标题 

Table Data 
Table Data 
Table Data 


dr RET S 
mS Pa 


分 


列 
要 修改 列 的 宽度 或 内 容 ， 你 可 以 使 用 其 他 组 件 。 下 面 是 一 些 实用 的 例子 


样式 描述 
2e 添加 一 个 网 格 组 件 中 的 .uk-widtn-* 类 。 
KAAF 添加 文本 组 件 中 的 .uk-text-left , .uk-text-right 或 .uk-text-center 类。 


KFE — 翻阅 一 下 文本 组 件 。 例 如 添加 一 个 .uk-text-bold 3&. 


Code 


«td class-"uk-width-1-10 uk-text-right">...</td> 
«td class="uk-width-9-10 uk-text-bold"»...«/td» 


ER 


垂直 居中 表格 内 容 ， 只 需 添加 .uk-table-middle 类 到 &lt;tr&gt; 
&lt;td&gt; 元 素 。 


饰 


若 要 以 不 同 的 风格 样式 显示 表格 ， 只 需 添加 一 个 修饰 类 到 .uk-table 


表格 上 的 鼠标 经 过 


添加 .uk-table-hover 类 ， 赋 予 表格 行 和 鼠标 经 过 状态 。 


示例 
Table Heading Table Heading Table Heading 
Table Data Table Data Table Data 
Table Data Table Data Table Data 


Table Data Table Data Table Data 


A 


类 之 后 。 


Code 


«table class-"uk-table uk-table-hover"'"»...«/table» 


表格 条 纹 


添加 .uk-table-striped 类 ， 为 表格 应 用 斑马 线条 纹 状 态 。 


示例 
Table Heading Table Heading Table Heading 
Table Data Table Data Table Data 
Table Data Table Data Table Data 
Table Data Table Data Table Data 
Code 


«table class="uk-table uk-table-striped">...</table> 


压缩 表格 


添加 .uk-table-condensed 类 使 表格 单元 格 更 加 紧凑 。 


示例 
Table Heading Table Heading Table Heading 
Table Data Table Data Table Data 
Table Data Table Data Table Data 
Table Data Table Data Table Data 


Code 


«table class-"uk-table uk-table-condensed"»...«/table» 


组 合 修饰 类 


表格 组 件 的 修饰 类 可 以 相互 组 合 使 用 。 


示例 
Table Heading Table Heading Table Heading 
Table Data Table Data Table Data 
Table Data Table Data Table Data 
Table Data Table Data Table Data 
Code 


<table class="uk-table uk-table-hover uk-table-striped uk-table-cor 
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响应 式 表格 

如 果 你 的 表格 恰好 比 它 的 容器 元 素 帘 了 一 些 或 者 最 终 在 某 个 特定 的 视 口 宽度 中 显得 
太 大 ， 只 需要 用 带 有 .uk-overflow-container 类 的 &lt;div&gt; 元 素 将 其 
包 衰 。 当 内 部 的 元 素 比 这 个 容器 本 身 宽 的 时 候 ， 将 会 创建 一 个 水 平 的 滚动 条 。 


示例 


Table Heading Table Heading Table Heading Table Heading Table Heading Table Headin 


Table Data Table Data Table Data Table Data Table Data Table Data 
Table Data Table Data Table Data Table Data Table Data Table Data 
Table Data Table Data Table Data Table Data Table Data Table Data 
Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer 


«div class-"uk-overflow-container"» 
«table»...«/table» 
«/div» 


轻松 创建 拥有 不 同样 式 与 布局 的 漂亮 表单 。 


用 法 


为 了 应 用 这 个 组 件 ， 需 要 添加 .uk-form 类 到 表单 元 素 中 。 所 有 表单 控件 都 被 并 
排放 置 在 下 面 这 行 。 


示例 
Option 01 v | Button Checkbox 


注意 在 这 个 例子 中 ， 我 们 使 用 了 一 个 按钮 组 件 中 的 按钮 。 当 表单 元 素 在 较 小 的 视 口 
中 堆 琶 时 ， 只 需要 添加 效果 组 件 中 的 data-uk-margin 属性 到 它 的 父 元 素 中 ， 
即 可 实现 添加 顶部 margin 。 


Code 


«form class-"uk-form"» 


«fieldset data-uk-margin-» 
«legend»...«/legend» 
«input type="text" placeholder=""> 
«input type="password" placeholder=""> 
«select» 
«option»...«/option» 
«option»...«/option» 
</select> 
«button class-"uk-button"»...«/button» 
«label»«input typez"checkbox'"» ...«/label» 
«/fieldset» 


«/form» 


一 


4 


为 一 个 &lt;div&gt; 元 素 添 加 .uk-form-row 用 来 放置 表单 控件 


示例 


Legend 


Option 01 v 
Button 


Checkbox 


Code 


«form classz"uk-form"» 
«fieldset» 
«legend»...«/legend» 
«div class-"uk-form-row'"»...«/div» 
«div class-'"uk-form-row'»...«/div» 
«/fieldset» 
«/form» 


控件 的 状态 


通过 表单 控件 上 反馈 的 状态 ， 为 用 户 提 供 基 础 信息 。 


添加 disabled 属性 到 表单 控件 中 ， 它 的 颜色 会 变 淡 ， 并 禁止 操作 。 


示例 


Code 


«input type="text" placeholder-"" disabled» 


有 效 性 状态 


添加 .uk-form-danger 3 .uk-form-success 类 到 表单 控件 中 ， 用 于 提示 用 
户 某 个 值 是 否 通过 有 效 性 验证 。 


示例 


form-danger 


i mm 
| form-success 





Code 
«input type="text" placeholder="" class-z"uk-form-danger"» 
«input type="text" placeholder="" class="uk-form-success"> 


控件 的 修 儿 


尺寸 的 调整 


添加 .uk-form-large 3X .uk-form-small 类 到 &lt;input&gt; , 
&lt;select&gt; 或 &lt;textarea&gt; 元 素 中 使 之 变 大 或 变 小 。 


示例 


Code 


«input type="text" placeholder="" class-z"uk-form-large'-» 
«input type="text" placeholder="" classz"uk-form-small'"- 


宽度 的 调整 


添加 .uk-form-width-large , .uk-form-width-medium , 
.uk-form-width-small 或 .uk-form-width-mini 类 到 一 个 
&lt;input&gt; , &lt;select&gt; 或 &lt;textarea&gt; 元 素 中 ， 调 整 它 

的 宽度 。 


示例 

Code 
«input type="text" placeholder-z'"" class-z"uk-form-width-large"» 
«input type="text" placeholder-z"" class-z"uk-form-width-medium"» 
«input type="text" placeholder-z"" class-z"uk-form-width-small"- 
«input type="text" placeholder-z"" class-"uk-form-width-mini"» 


Roue qs 件 里 使 用 网 格 组 件 width-* 类 。 这 是 非常 有 用 的 ， 
果 你 想 让 表单 控件 的 宽度 扩展 十 满 它 的 父 级 容器 的 宽度 。 


示例 


Code 


«input type="text" placeholder="" class-z"uk-width-1-1"» 


白板 表单 


添加 .uk-form-blank 类 使 表单 控件 的 样式 极 简化 。 


示例 


Code 


«input type="text" placeholder="" class-"uk-form-blank'-» 


帮助 文本 

使 用 .uk-form-help-inline 或 .uk-form-help-block 类 ， 为 表单 控件 添加 
行内 的 或 者 块 级 的 帮助 文本 。 

示例 


这 里 使 用 .uk-form-help-inline 类 建立 了 左 侧 的 间距 。 


这 里 使 用 .uk-form-help-block 类 建立 了 与 上 文 相 关联 的 段落 。 


Code 


«div class="uk-form-row"> 
«input type="text" placeholderz'""» «span class-z"uk-form-help-ir 
«/div» 


«div class-"uk-form-row'- 
«textarea cols-"" rows="" placeholder-z""»...«/textarea» 
«p class-"uk-form-help-block'»...«/p» 

«/div» 
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布局 的 调整 
这 里 有 两 个 可 用 的 类 可 以 用 于 布局 调整 : .uk-form-stacked and 
n form-horizontal 。 它 们 都 要 求 表 单 空 间 被 放置 在 带 有 .uk-form-row 类 


容器 中 。Label 必须 添加 ,uk-form-label 类 ， 并 把 相应 的 空间 放置 在 带 有 
EE 类 的 容器 中 。 


Code 


«form classz"uk-form uk-form-stacked"» 
«div class-"uk-form-row'» 
«label classz"uk-form-label" forz"'""»...«/label» 
«div class-"uk-form-controls"»...«/div» 
«/div» 
«/form» 


注意 布局 调整 类 同样 可 以 用 于 &lt;fieldset&gt; 元 素 中 。 这 意味 着 如 果 你 使 
用 了 多 个 fieldset， 你 可 以 为 每 个 fieldset 设 置 不 同 的 布局 。 

A EE XX 

添加 .uk-form-stacked 类 使 label 标 签 显示 在 控件 上 方 。 


示例 


水 平 放置 表单 


添加 .uk-form-horizontal 类 使 label 标 签 和 控件 水 平 并 排放 置 


示例 


Text input 


Password input 


Select field Option 01 v 
Textarea 
Radio input Radio input 
102253 
Checkbox input Checkbox input 
11.121213 
Mixed controls Checkbox input 5 Number input Option 01 v Select field 


表单 控件 中 的 文本 


如 果 你 在 表单 控件 中 同时 使 用 了 文本 与 单 选 框 或 者 文本 与 复 选 枉 ， 只 需要 添加 
.uk-form-controls-text 类 就 能 使 文本 适当 地 对 齐 。 


Code 


«div class-"uk-form-controls uk-form-controls-text'"»...«/div» 


表单 控件 中 的 垂直 间距 


如 果 你 在 表单 控件 中 创建 了 段落 ， 添 加 .uk-form-controls-condensed 类 可 以 
减 小 段落 间 的 间隔 。 


示例 


Mixed controls 泥 合 放 置 的 控件 


Checkbox input 5 Number input Option o1 v Select field 
Checkbox input 5 Number input Option 01 v Select field 
Code 


«div class-"uk-form-controls uk-form-controls-text'» 
«p class-"uk-form-controls-condensed"»...«/p» 
«p class-"uk-form-controls-condensed"»...«/p» 
«/div» 


表单 与 网 格 
这 个 例子 展示 了 如 何 用 网 格 组 件 空间 表单 。 


示例 


Code 


«form class-"uk-form"» 


«div class-"uk-grid'» 
«div class-"uk-width-1-2"»«input type="text" placeholderz"' 
«div classz"uk-width-1-4"»«input type="text" placeholderz"' 
«div class-z"uk-width-1-4"»«input type="text" placeholderz"' 
«/div» 


«/form» 
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表单 与 图 标 


这 个 例子 展示 了 怎么 为 表单 添加 图 标 。 


示例 


Code 


«div class="uk-form-icon"> 
«i class-'uk-icon-calendar'»«/i» 
«input type-"text"» 

«/div» 


表单 增强 


表单 可 以 用 表单 增强 组 件 进行 扩展 ， 以 定义 单 选 框 与 复 选 框 的 样式 。 


常用 组 件 


按钮 
轻松 创建 拥有 不 同样 式 的 漂亮 按 
用 法 


要 应 用 这 个 组 件 ， 在 一 个 &lt;a&gt; 或 &lt;button&gt; 元 素 中 添 
加 .uk-button 类 即 可 。 现在 你 已 经 创建 了 一 个 按钮 。 在 &lt;button&gt; 元 素 
中 添加 disabled 属性 可 以 禁用 按钮 。 


示例 


Link Button 


Code 


«a class-'"uk-button" hrefz""»...«/a» 
«button class-"uk-button" type-z'"button'»...«/button» 
«button class-"uk-button" type="button" disabled»...«/button» 


注意 在 一 个 组 (row) 里 显示 多 个 按钮 ， 你 可 以 给 它们 添加 一 个 顶部 外 边 距 (top 
margin) ， 这 样 ,在 较 小 的 视 口 中 它们 会 堆 司 显示。 仅 需 把 效果 组 件 中 的 
data-uk-margin 属性 添加 到 它们 的 父 元 素 中 即 可 。 


这 里 有 几 个 颜色 修饰 类 可 以 使 用 。 仅 需 添 加 下 列 类 中 的 一 个 ， 即 可 得 到 不 同 的 外 
观 。 
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m Class% 描述 
.uk-button-primary 着 重 强 调 在 一 系列 按钮 中 的 重要 性 


.uk-button-success 表示 成 功 或 积极 的 行为 





.uk-button-daenger 表示 和 危险 或 负面 的 行为 
Link .uk-button-link 保持 按钮 的 行为 的 同时 ， 使 其 看 起 来 更 像 一 个 链接 。 


尺寸 修 / 
往 一 个 按钮 中 添 


加 .uk-button-mini > .uk-button-small 或 .uk-button-large 类 使 该 按钮 
更 小 或 更 大 。 


| 迷你 按 福 Mini button EE 
小 按 租 Small button smanputon | 
| SkhdetüDefault button SA d&tHDefault button 


| 大 按钮 Large button | 大 按钮 Large button 
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添加 网 格 组 件 中 的 ,uk-width-1-1 类 ， 该 按钮 将 占 满 整 个 容器 宽度 。 


示例 


Button 








按钮 132 


«button class-"uk-button uk-width-1-1 uk-margin-small-bottom"»...«, 
«button class-"uk-button uk-width-1-1"»2...«/button» 


E — |] 

















按钮 组 


创建 一 个 按钮 组 ， 在 包 庄 着 按钮 们 的 &lt;div&gt; 元 素 中 添加 
,UK-button-group 类 即 可 。 


示例 


Link Button Button 
Link Button Button 
Link Button Button 


Link Button Button 


zw 
c 
gu 


«div class-"uk-button-group"» 
«a class-'"uk-button" hrefz'""»,...«/a» 
«button class-z"uk-button"»...«/button» 
«button class-z"uk-button"»...«/button» 
«/div» 


JavaScript 


你 可 以 通过 JavaScript 切 换 按 钮 状态 。 添 加  data-uk-button 属性 即 可 。 


示例 


«button class-z"uk-button uk-button-primary" type="button" data-uk-I 
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复 选 按钮 
像 复 选 框 一 样 切 换 一 组 按钮 的 状态 ， 需 要 将 这 些 按钮 包 庄 在 带 有 data 属 性 


data-uk-button-checkbox 的 &lt;div&gt; 元 素 中 。 这 属性 也 能 用 于 按钮 
组 。 


示例 


Button Button Button 


Button Button Button 


«div data-uk-button-checkbox» 
«button class-"uk-button"»...«/button» 
«button class-z"uk-button"»...«/button» 
«button class-"uk-button"»...«/button» 
«/div» 
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想 要 按钮 组 像 下 面 例 子 中 一 样 只 能 按 下 一 个 ? 用 带 有 data-uk-button-radio 属 
性 的 &lt;div&gt; 元 素 包 庄 一 组 按钮 就 行 。 这 个 也 能 用 于 按钮 组 。 


示例 
Button Button Button 
Button Button Button 


«div data-uk-button-radio» 
«button class-"uk-button"» 
«button class-"uk-button"» 


.. .</button> 
...«/button» 


«button class-"uk-button"»...«/button» 
«/div» 


带 有 下 拉 菜 单 的 按钮 


。 只 需要 添加 


J .uk-button-dropdown 类 名 和 
包含 按钮 和 下 


按钮 可 以 用 来 触发 下 拉 菜 六 
拉 菜 单 的 &lt;div&gt; 元 素 中 即 可 。 


data-uk-dropdown 属性 到 


Example 


Hover v Hover v Hover v 


Markup 


«!-- This is the container enabling the JavaScript --> 
«div class-"uk-button-dropdown" data-uk-dropdown- 


«!-- This is the button toggling the dropdown --> 
«button class-"uk-button"»...«/button» 


«!-- This is the dropdown --> 
«div class-"uk-dropdown uk-dropdown-small"- 
«ul class-'"uk-nav uk-nav-dropdown'"- 
<li><a href="">. ..</a></li> 
<li><a href="">, ..</a></li> 
</ul> 
</div> 


</div> 


带 下 拉 菜 单 的 按钮 组 


使 用 按钮 组 将 按钮 分 成 左边 是 标准 行为 的 按钮 和 右边 是 带 下 拉 菜 单 的 按钮 ， 仅 需 将 
他 们 用 一 个 &lt;div&gt; AER? REE &lt;div&gt; F% 

加 data-uk-dropdown-"[mode:'click')" 属性 即 可 。 当然 ， 下 拉 菜 单 也 可 以 用 
于 按钮 组 中 的 一 个 按钮 。 


示例 


Code 


«div class="uk-button-group"> 


«1-- 标准 按钮 --> 
«button class-"uk-button"»...«/button» 


<1-- 关联 JavaScript 的 容器 --» 
«div data-uk-dropdownz"[mode: 'click'}"> 


<1-- 触发 下 拉 菜 单 的 按钮 --> 
«a href="" class-"uk-button'»...«/a» 


«1-- 下 拉 菜 单 --> 
«div class-"uk-dropdown uk-dropdown-small"- 
«ul class-'"uk-nav uk-nav-dropdown"- 
<li><a href="">., ..</a></li> 
<li><a href="">. ..</a></li> 
</ul> 
</div> 


</div> 
</div> 


图 标 


使 用 图 标 字 体 ， 在 任何 地 方 放置 矢量 图 标 。 


这 个 组 件 使 用 了 由 Dave Gandy 发 起 的 Font Awesome 图 标 字 体 。Font Awesome 
为 web 相 关 行 为 提供 了 超过 300 个 标志 和 符号 。 由 于 允许 你 通过 CSS 简 单 地 改变 闫 
色 、 尺 寸 和 其 他 样式 ， 图 标 字体 是 很 棒 的 选择 。 它 们 是 可 伸缩 的 矢量 图 形 ， 这 意味 
着 它们 在 高 分 辩 率 设备 上 也 能 很 好 地 显示 。 


用 法 


应 用 此 组 件 ， 在 任何 &lt;i&gt; 或 &lt;span&gt; 元 素 中 添加 .uk-icon-* 
类 即 可 。 瞧 ， 你 有 了 一 个 矢量 图 标 ， 它 能 像 文 本 一 样 继承 了 尺寸 和 色彩 。 


示例 


从 使 用 .uk-icon-cog 类 
dà 使 用 .uk-icon-user 3É 
A 使 用 .uk-icon-home 3É 


(7 链接 中 的 图 标 


局 带 有 图 标的 按钮 
= Ak 
标签 

aloa edes esee 


«i class-"uk-icon-cog"»«/i» 


«1-- 链接 中 的 图 标 --> 
«a href=""><i class-"uk-icon-cog"»«/i» ...«/a» 


更 多 示例 


按钮 组 


这 个 示例 展示 了 每 个 按钮 都 带 有 图 标的 按钮 租 ， 来 自 按钮 组 件 o 
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示例 


Mo BM b» Mm 





这 个 示人 LE 了 一 个 被 分 割 成 左边 是 正常 按钮 右边 是 下 拉 菜 单 切换 按钮 的 按钮 ， 来 


示例 
E= Post v 
块 引用 


这 个 示例 展示 基础 组 件 中 个 块 引用 ， 它 使 用 了 一 个 大 引号 图 标 ， 还 使 用 了 效果 组 件 
中 的 .uk-align-left X» 


示例 


6 0 oon cR M NER R , TRIERA TEE 
BUET ANEI, 


Ar 


添加 .uk-icon-small * .uk-icon-medium 或 .uk-icon-large 类 使 一 个 图 标 


更 大 。 


A ZESAR. This is the default size 
佬 这 个 图 标 使 用 ,UK- icon- small 3É 
人 人 这 个 图 标 使 用 .uk-icon-medium 类 


4 zm .uk-icon-large SÉ 
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旋转 


添加 .uk-icon-spin 创建 动画 的 旋转 图 标 。Add the .uk-icon-spin class to 
create animated spinning icons. 


“用 于 加 载 内 容 的 旋转 图 标 


O 用 于 刷新 内 雁 的 图 标 


图 标的 hover 效果 


使 用 .uk-icon-hover 修饰 器 将 锚 文本 做 成 图 标 效 果 ， 它 添加 了 hover 效 果 并 溢 
出 了 链接 下 划 线 。 


Example 
QY 


Markup 


<a href="" class="uk-icon-hover uk-icon-github"></a> 
图 标 按钮 
使 用 修饰 类 .uk-icon-button 创建 一 个 图 标 按钮 ， 可 以 完美 地 用 于 社交 图 标 。 
示例 

Ow 6 HB 


«a hrefz"" class-"uk-icon-button uk-icon-github"»«/a» 


调整 图 标 


为 图 标 添 加 固定 的 宽度 ， 并 将 其 居中 ， 只 需 添 加 ,uk-icon-justify 类 名 。 在 一 
个 列表 中 使 用 不 同 的 图 标 时 是 很 有 帮助 的 哦 。 


Markup 


«a href="" class="uk-icon-justify uk-icon-github"></a> 


E 
这 是 所 有 一 个 所 有 可 用 的 .uk-icon-* 类 的 总 览 ， 由 Font Awesomed 4X o 


Web 应 用 程序 图 标 
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Q adjust 

中 arrows 

Q at 

Tfi bank (alias) 

三 bars 

E battery-1 

Im battery-3 

di beer 

KK bell-slash-o 

Q bluetooth 

& book 

X bug 

® bullseye 

$ calendar 
calendar-plus-o 
& car 

© caret-square-o-up 
3! certificate 
check-square 

O circle-o 

[rj clone 

€» cloud-upload 

$t cog 

$» commenting 

© compass 

em credit-card-alt 
«& cubes 

Ga desktop 

(Z4 edit (alias) 

EA envelope-o 

! exclamation 
external-link-square 
IB fax 

[à file-audio-o 
file-movie-o (alias) 
[R file-powerpoint-o 
[5 file-zip-o (alias) 
T fire-extinguisher 
4 flash (alias) 

E folder-open 

æ gamepad 

O genderless (alias) 
T£ graduation-cap 
4") hand-paper-o 
C) hand-rock-o 

# hashtag 

WP heartbeat 

X hourglass 


图 标 


4$ anchor 

二 arrows-h 

é&& automobile (alias) 
[il bar-chart 

C2 battery-empty (alias) 
battery-half (alias) 
= battery-full (alias) 
À bell 

& bicycle 

3 bluetooth-b 

W bookmark 

Bi building 

& bus 
calendar-check-o 
f& calendar-times-o 
© caret-square-o-down 
"E cart-arrow-down 
v check 

区 check-square-o 

OQ circle-o-notch 

X close (alias) 

«/» code 

2 cogs 

© commenting-o 

© copyright 

t crop 

f cutlery 

«P? diamond 

= ellipsis-h 

O envelope-square 
6 exclamation-circle 
©® eye 

4 female 

file-code-o 

B file-pdt-o 

[3 file-sound-o (alias) 
&3 film 

Ie flag 

À flask 

E folder-open-o 

Å gavel 

ü gift 

&& group (alias) 

{h hand-peace-o 

& hand-scissors-o 
€» headphones 

'D history 

M hourglass-o 


Bi archive 

1 arrows-v 

4| balance-scale 

bl bar-chart-o (alias) 
C3 battery-0 

(&) battery-2 
battery-4 

fA bell-o 

fA binoculars 

* bolt 

LJ bookmark-o 
building-o 

& cab (alias) 

六 calendar-minus-o 
camera 

O caret-square-o-left 
"E cart-plus 

Q check-circle 

Y child 

O circle-thin 

dis cloud 

P code-fork 

罗 comment 

€, comments 

© creative-commons 
€» crosshairs 

®@ dashboard (alias) 
© dot-circle-o 

1 ellipsis-v 

g eraser 


A exclamation-triangle 


4» eye-slash 

中 - fighter-jet 

[A file-excel-o 

[À file-photo-o (alias) 
网 file-video-o 

Y filter 

¥ flag-checkered 

iin. folder 

G frown-o 

$t gear (alias) 

Y glass 

=) hand-lizard-o 

45 hand-pointer-o 
£) hand-spock-o 

99 neart 

$4 home 

X hourglass-1 (alias) 


lês area-chart 

sk asterisk 

Q ban 

Ill barcode 

E> battery-quarter (alia 
(m) battery-three-quarte 
k= bed 

X bell-slash 

á birthday-cake 

g bomb 

= briefcase 

{4 bullhorn 

g calculator 

PA calendar-o 

kai camera-retro 

回 caret-square-o-right 
cc 

© check-circle-o 

@ circle 

Q clock-o 

& cloud-download 
"P coffee 

€» comment-o 

€ comments-o 

E credit-card 

© cube 

& database 

xk download 

& envelope 

= exchange 

(7 external-link 

A eyedropper 

[B file-archive-o 

[à file-image-o 

[à file-picture-o (alias) 
f file-word-o 

9 tire 

E: flag-o 

O folder-o 

© futbol-o 

© gears (alias) 

Q globe 

中 hand-stop-o (alias) 
C) hand-grab-o (alias) 
B hdd-o 

S heart-o 

k= hotel (alias) 

X hourglass-start 
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X hourglass-2 (alias) 
Y i-cursor 

iinfo 

keyboard-o 

Å legal (alias) 

Q life-bouy (alias) 
Q lightbulb-o 

^ magic 

4 mail-reply-all (alias) 
[IU map-o 

*& microphone 

© minus-square 
money 

ke mouse-pointer 
E object-group 

Á paper-plane-o 
(7 pencil-square-o 
Ea photo (alias) 

% plug 

外 plus-square-o 

B  qrcode 

39 quote-right 

® registered 

*^ reply-all 

A rss 

Q search-plus 

f* share 

© share-square-o 
tm shopping-basket 
mil signal 

®© soccer-ball-o (alias) 
ls sort-amount-asc 
~ Sort-down (alias) 
和 space-shuttle 

D) square-o 

$ star-half-full (alias) 
LJ sticky-note-o 

® support (alias) 
8 tags 

>_ terminal 

£5 thumbs-o-up 

© times-circle 

O toggle-left (alias) 
© toggle-up (alias) 
$ tree 

LJ tv (alias) 

ia uniock-alt 

& user 

& users 

4) volume-up 

A wrench 


交通 工具 图 标 


图 标 


X hourglass-half 
image (alias) 

6 info-circle 
^Blanguage 

O lemon-o 

© life-buoy (alias) 
lA line-chart 

V magnet 

$ male 

9 map-pin 

Z microphone-slash 
& minus-square-o 
(& moon-o 

Ji music 

Lt object-ungroup 
$ paw 

96 percent 
picture-o 

+ plus 

(5 power-off 

? question 

X random 

X remove (alias) 
t3 retweet 
rss-square 

A send (alias) 

«$ share-alt 

U shield 

'* shopping-cart 
ss sitemap 

* sort 

1= sort-amount-desc 
l5 sort-numeric-asc 
Z* spinner 

食 star 

*: star-half-o 

Å street-view 

Li tablet 

Æ tasks 

X thumb-tack 

si thumbs-up 

(9 times-circle-o 
CD toggle-off 

TM trademark 

Æ trophy 

<% umbrella 

$ unsorted (alias) 
&+ user-plus 

8 video-camera 
A warning (alias) 


M hourglass-3 (alias) 
&a inbox 
M institution (alias) 
L2 laptop 
3 level-down 
Q life-ring 
^f location-arrow 
他 mail-forward (alias) 
fij nap 
= map-signs 
- minus 
D mobile 
T& mortar-board (alias) 
三 navicon (alias) 
«f paint-brush 
$ pencil 
t phone 
€ pie-chart 
© plus-circle 
& print 
Q question-circle 
€» recycle 
三 reorder (alias) 
A road 
Q search 
Á send-o (alias) 
© share-alt-square 
& ship 
+) sign-in 
ž sliders 

2 sort-alpha-asc 
< sort-asc 

? sort-numeric-desc 
1 spoon 
J star-half 
Yr star-o 
lil) suitcase 
68 tachometer 
& taxi 
3$ thumbs-down 
4h ticket 
ô tint 
© toggle-on 
Ü trash 
di truck 
M university 
«t upload 
& user-secret 
* volume-down 
&. wheelchair 


X hourglass-end 
lat industry 

4, key 

2 leaf 

f level-up 

Q life-saver (alias) 
là lock 

** mail-reply (alias) 
9 map-marker 

© meh-o 

© minus-circle 

D mobile-phone (alias) 
Ge motorcycle 
newspaper-o 

A paper-plane 
pencil-square 
phone-square 

X plane 
plus-square 

Br- puzzle-piece 

&6 quote-left 

© refresh 

** reply 

«f rocket 

Q search-minus 

ES server 
share-square 

à shopping-bag 

(9 sign-out 

© smile-o 

14 sort-alpha-desc 
~ Sort-desc 

^ sort-up (alias) 

Bi square 

£ star-halt-empty (alias) 
E sticky-note 

12 sun-o 

8 tag 

Œ television 

Q thumbs-o-down 
x times 

®© toggle-down (alias) 
®© toggle-right (alias) 
fij trash-o 

aí unlock 

*& usb 

&x user-times 

4 volume-off 

È wifi 
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gd ambulance 
& cab (alias) 
X plane 

gp subway 

&. wheelchair 


手势 图 标 


2) hand-lizard-o 
45 hand-pointer-o 
d hand-spock-o 
£j thumbs-o-up 


性 别 图 标 


O genderless (alias) 


Oe mars-stroke-h 
Q transgender 
QU venus-mars 


文件 类 型 图 标 


B file 

[À file-excel-o 
file-pdf-o 

[3 file-sound-o (alias) 
[i file-word-o 


旋转 图 标 


Q circle-o-notch 
Z* spinner 


图 标 


æ automobile (alias) 
é& car 

af rocket 

& taxi 


€) hand-stop-o (alias) 
C) hand-grab-o (alias) 
X thumb-tack 
ui thumbs-up 


TF mars 
ô mars-stroke-v 
Y transgender-alt 


[5 file-archive-o 

Eà file-image-o 

[à file-photo-o (alias) 
Bs file-text 

[Ñ file-zip-o (alias) 


$t cog 


& bicycle 
»- fighter-jet 
f£. ship 

g train 


€) hand-paper-o 
€) hand-rock-o 
8$ thumbs-down 


Gy mars-double 
$$ mercury 
Ọ venus 


[3 file-audio-o 

[e$ file-movie-o (alias) 
[3 file-picture-o (alias) 
B file-text-o 


&t gear (alias) 


& bus 

Sb motorcycle 
* space-shuttle 
J truck 


5 hand-peace-o 
&) hand-scissors-o 
Q thumbs-o-down 


g mars-stroke 
9 neuter 
G? venus-double 


file-code-o 
[3file-o 

[A file-powerpoint-o 
[s file-video-o 


© refresh 
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表单 控件 图 标 


check-square 


© dot-circle-o 


plus-square-o 


支付 工具 图 标 


EZ cc-amex 


EJ cc-mastercard 


E credit-card 


文本 编辑 器 


三 align-center 
B bold 

[T] columns 

g eraser 

B file-text-o 

H header 

= list 

Æ outdent 

C repeat 

2 scissors 

S table 

aa th-large 

$$ unlink (alias) 


方向 


图 标 


(v check-square-o 
© minus-square 
BB square 


cc-diners-club 
EZ cc-paypal 
4} google-wallet 


Æ align-justify 
% chain (alias) 
& copy (alias) 
B iie 

的 files-0 

zm indent 

S list-alt 

® paperclip 

Y rotate-left (alias) 
号 strikethrough 
Ti text-height 
:z th-list 


e circle 
Bi minus-square-o 
CJ square-o 


g cc-discover 
cc-stripe 
IP paypal 


= align-left 

$$ chain-broken 
Se cut (alias) 

[5 file-o 
floppy-o 

I italic 

$= list-ol 

«I paragraph 

C rotate-right (alias) 
x; subscript 

T text-width 

U underline 


O circle-o 
plus-square 


CC-jcb 
E cc-visa 


Æ align-right 
E clipboard 
至 dedent (alias) 
B tile-text 

A font 

% link 

£x list-ul 

F paste (alias) 
save (alias) 
x? superscript 
sss th 


Y) undo 
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v angle-double-down 
v angle-down 

© arrow-circle-down 
© arrow-circle-o-right 
Y arrow-down 

+ arrows 

v caret-down 


[3 caret-square-o-left 
Q chevron-circle-down 
vv chevron-down 

4» hand-o-down 
llong-arrow-down 

© toggle-down (alias) 


En: 


X arrows-alt 
x” expand 

M pause 

Q play-circle 
B stop 


品牌 图 标 


图 标 


« angle-double-left 
< angle-left 

Q arrow-circle-left 
@ arrow-circle-o-up 
€ arrow-left 

2€ arrows-alt 

4 caret-left 


© caret-square-o-right 
Q chevron-circle-left 

€ chevron-left 

«3 hand-o-left 

+— long-arrow-left 

O toggle-left (alias) 


« backward 

IV fast-backward 
Q pause-circle 
© play-circle-o 
© stop-circle 


» angle-double-right 

» angle-right 

Q arrow-circle-o-down 
@ arrow-circle-right 

3 arrow-right 

= arrows-h 

» caret-right 


(3 caret-square-o-up 
© chevron-circle-right 
> chevron-right 

€? hand-o-right 

— long-arrow-right 
®© toggle-right (alias) 


»* compress 

MM fast-forward 
® pause-circle-o 
M step-backward 
9 stop-circle-o 


^ angle-double-up 
^ angle-up 

© arrow-circle-o-left 
Q arrow-circle-up 
^^ arrow-up 

[ arrows-v 

回 caret-square-o- 
down 

a caret-up 

Q chevron-circle-up 
^ chevron-up 

£ hand-o-up 
Tlong-arrow-up 

© toggle-up (alias) 


全 eject 
b> forward 

P play 

M step-forward 
© youtube-play 
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& 500px 

& angellist 

9 bitbucket 

Q bluetooth 

EZ cc-amex 

EJ cc-mastercard 
© chrome 

[€ contao 

X deviantart 

€ drupal 

f facebook 

© firefox 

Ta forumbee 

4» gg 

O github 

G google 

Q gratipay 

© instagram 

© jsfiddle 

in linkedin 

© meanpath 

2 odnoklassniki 
Q opera 

Ø pied-piper 
pinterest-square 
QJ rebel 

fV renren 

«$ share-alt 

CN skyatlas 

4t» soundcloud 
«XP steam 

® tencent-weibo 
tumbir-square 
*& usb 

V vine 

€i weixin 

$ wordpress 

B y-combinator-square 
à yelp 


医疗 类 图 标 


&3 ambulance 
plus-square 


图 标 


Q adn 

€ apple 

El bitbucket-square 
3 bluetooth-b 
cc-diners-club 
cc-paypal 

€9 codepen 

J css3 

sim digg 

© edge 

f facebook-f (alias) 
Q flickr 

P foursquare 

Q gg-circle 

es github-alt 

G+ google-plus 

© hacker-news 

Æ internet-explorer 
©s lastfm 

图 linkedin-square 
i4 medium-logo 
odnoklassniki-square 
六 optin-monster 
4 pied-piper-alt 
Q product-hunt 

© reddit 

@ safari 

© share-alt-square 
®© skype 

© spotify 

£j steam-square 

LU trello 

Œ twitch 

¥ viacoin 

wK vk 

f9 whatsapp 

X xing 

Y yahoo 

gs youtube 


© h-square 
% stethoscope 


a. amazon 

Bè behance 

Ë bitcoin (alias) 
Ë btc 

E cc-discover 
cc-stripe 

€ codiepie 

Cf dashcube 

€» dribbble 

& empire 

Ki facebook-official 
fonticons 

® ge (alias) 

git git 

(2 github-square 
GB google-plus-square 
5; houzz 

© ioxhost 

© lastfm-square 
A linux 

cw mixcloud 

T7 opencart 

i pagelines 

Q pinterest 

4 a3 

x$ reddit-alien 

S scribd 

© shirtsinbulk 

Xk slack 

至 stack-exchange 
Jù stumbleupon 
tripadvisor 

Ww twitter 

'V vimeo 

€ wechat (alias) 
W/ wikipedia-w 
xing-square 
BH yc (alias) 

O youtube-play 


hospital-o 
d& user-md 


«$ android 
behance-square 
H black-tie 
buysellads 

EZ cc-jcb 

四 cc-visa 

€) connectdevelop 
本 delicious 

4 dropbox 

€ expeditedssi 

B facebook-square 
Ñ fort-awesome 
get-pocket 
git-square 

© gittip (alias) 

Y) google-wallet 
html5 

& joomla 

AR leanpub 

m maxcdn 

M modx 

d- openid 

PP paypal 

f? pinterest-p 

QJ ra (alias) 

B reddit-square 
«5 sellsy 

Ed simptybuilt 

& slideshare 

ə stack-overflow 
Q stumbleupon-circle 
t tumbir 

O twitter-square 
vimeo-square 
& weibo 

s8 windows 

E y-combinator 

E yc-square (alias) 
youtube-square 


B medkit 
& wheelchair 
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关闭 /Close 
定义 不 同样 式 的 ， 能 与 各 种 组 件 结合 使 用 的 关闭 按钮 。 
用 法 


使 用 这 个 组 件 ， 需 要 添加 .uk-close 类 到 一 个 &lt;a&gt; 或 
&lt;button&gt; 元 素 中 。 


示例 


Code 


«a href="" class-"uk-close'"»«/a» 


样式 调整 
添加 .uk-close-alt 类 ， 为 关闭 按钮 带 来 一 个 非 同 寻常 的 样式 。 


示例 


Code 


«a href="" class-"uk-close uk-close-alt'»«/a» 


提示 框 里 的 关闭 按钮 


这 是 一 个 关于 如 何 将 关闭 按钮 和 提示 框 结合 使 用 的 例子 。 


示例 
这 是 一 个 在 提示 框 中 使 用 关闭 按钮 的 例子 。 


这 是 一 个 在 提示 框 中 使 用 关闭 按钮 的 例子 。 


模 态 对 话 框 里 的 关闭 按钮 
这 是 一 个 在 模 态 对 话 框 中 使 用 关闭 组 件 的 例子 。 
zb 


Button 


徽章 /Badge 
轻松 创建 好 看 的 徽章 来 标示 和 强调 你 的 内 容 。 
用 法 


要 创建 一 个 徽章 ? 只 需 添 加 .uk-badge 类 到 一 
^* &lt;div&gt; S &lt;span&gt; /GL& T ^ 


示例 
(info | New EJ 


Code 


«div class="uk-badge">...</div> 


修饰 


若 需 以 不 同 的 样式 显示 标签 ， 只 需 为 带 有 .uk-badge 类 的 添加 修饰 类 。 这 些 人 
饰 类 可 以 相互 结合 使 用 。 


NN 


通知 

添加 .uk-badge-notification 类 标示 一 个 通知 ， 通 常用 于 显示 数字 。 
示例 

0000€» 


Code 


«div class-"uk-badge uk-badge-notification"»...«/div» 


色彩 修饰 


添加 .uk-badge-success , .uk-badge-warning 或 者 .uk-badge-danger 类 
为 标签 添加 色彩 。 


示例 
success ICIO Danger | 


Code 


«div class-"uk-badge uk-badge-success'»...«/div» 
«div class-"uk-badge uk-badge-warning"»...«/div» 
«div class-"uk-badge uk-badge-danger"»...«/div» 


提示 框 

为 成 功 、 警 告 和 错误 信息 定义 样式 。 

用 法 

要 应 用 此 组 件 ， 添 加 .uk-alert 类 至 块 元 素 中 即 可 。 


示例 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
et dolore 


«div class-"uk-alert"»5...«/div» 


关闭 按钮 


为 了 使 用 一 个 关闭 按钮 ， 在 该 提示 框 内 部 的 &lt;button&gt; 或 &lt;a&gt; 元 
素 中 添加 .uk-alert-close 类 。 要 使 关闭 按钮 的 JavaScript 生 效 ， 仅 需 往 该 提示 
框 中 添加 data-uk-alert 属性 。 虽 然 你 也 可 以 使 用 文本 或 者 一 幅 图 片 ， 我 们 还 
是 建议 添加 关闭 组 件 中 的 .uk-close 类 来 使 这 个 按钮 拥有 一 个 更 完美 的 样式 。 


示例 


Lorem ipsum dolor sit amet, consectetur adipisicing elit 


«div class-"uk-alert" data-uk-alert» 
«a hrefz"" class-'"uk-alert-close uk-close"»«/a» 
<p>. . ps 

«/div» 


有 几 种 不 同 的 颜色 修饰 类 可 供 选用 。 仅 需 添加 以 下 类 中 的 一 个 就 能 得 到 一 个 不 同 的 
外 观 o 


示例 
To indicate success or a positive message add the .uk-alert-success Class. 


To indicate a message containing a warning add the | .uk-alert-warning Class 


To indicate an important message add the .uk-alert-danger Class 


«div class-"uk-alert uk-alert-success'» ... </div> 
«div class-"uk-alert uk-alert-warning"»...«/div» 
«div class-"uk-alert uk-alert-danger"»...«/div» 


尺寸 


添加 .uk-alert-large 类 增 大 一 个 提示 框 的 空间 。 如 果 你 想 使 用 更 丰富 的 排 
版 ， 这 会 非常 有 用 。 


示例 


Today's headline 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
nisi ut aliquip ex ea commodo consequat. 


«div class-"uk-alert uk-alert-large"»...«/div» 
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缩 略 图 /Thumbnail 
创建 拥有 各 种 不 同样 式 和 尺寸 的 缩 略 图 。 
用 法 


要 使 应 用 个 组 件 ， 只 需要 添加 .uk-thumbnail 类 到 一 个 &lt;img&gt; , 
&lt;a&gt; 或 &lt;figure&gt; 元 素 中 。 


示例 


内 内 内 





Code 

«!-- This is an image as a thumbnail --> 

«img class-"uk-thumbnail" srcz"" alt=""> 

<!-- This is an anchor as a thumbnail --> 

«a class-"uk-thumbnail" href=""><img src="" alt=""></a> 

<!-- This is a figure as a thumbnail --> 

«figure class="uk-thumbnail"><img src="" alt=""></figure> 
图 片 说 明 


添加 .uk-thumbnail-caption 类 到 一 个 &lt;div&gt; 元 素 中 ， 可 以 在 图 片 下 
面 添加 一 个 图 片 说 明 。 


示例 
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P" P" P" 





Caption «div» Caption «a» Caption «figure» 
Code 

«!-- This is a div as a thumbnail with a caption --» 
«div class-"uk-thumbnail"» 

«img src="" altz""» 

«div class-"uk-thumbnail-caption"»...«/div» 
«/div» 
«!-- This is an anchor as a thumbnail with a caption --> 
«a class-"uk-thumbnail" href=""> 

«img srcz"" alt=""> 

«div class-"uk-thumbnail-caption"»...«/div» 
</a> 
<!-- This is a figure as a thumbnail with a caption --> 
«figure class="uk-thumbnail"> 

<img src="" alt=""> 


«figcaption class="uk-thumbnail-caption">...</figcaption> 
</figure> 


尺寸 调整 


使 用 .uk-thumbnail-large , .uk-thumbnail-medium , 
.Uk-thumbnail-small 或 .uk-thumbnail-mini 类 来 调整 图 片 的 尺寸 。 在 基 
础 组 件 中 要 求 图 片 默认 地 具有 响应 式 性 能 。 


示例 
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,Uk-thumbnail-large 


.uk-thumbnail-medium .uk-thumbnail-small .uk-thumbnail-mini 


Code 


«div class-"uk-thumbnail uk-thumbnail-large"»...«/div» 
«div class-"uk-thumbnail uk-thumbnail-medium"»...«/div» 
«div class-"uk-thumbnail uk-thumbnail-small"»...«/div» 
«div class-"uk-thumbnail uk-thumbnail-mini"»...«/div» 


你 甚至 可 以 将 缩放 缩 略 图 超出 其 正常 大 小 ， 使 其 延伸 到 它 的 父 元 素 的 宽度 。 只 需 添 
Je .uk-thumbnail-expand 类 即 可 。 


示例 
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Code 


«div class-"uk-thumbnail uk-thumbnail-expand"»...«/div» 


网 格 
你 可 以 通过 使 用 网 格 组 件 轻松 地 创建 带 有 缩 略 图 的 网 格 。 


示例 
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Pp PE Er 





Code 


«div class-"uk-grid'» 
«div class-"uk-width-medium-1-2"»«img class-"uk-thumbnail" src: 
«div class-'"uk-width-medium-1-2"-» 
«div class-"uk-grid'» 
«div class-"uk-width-medium-1-2"»«img class-"uk-thumbn: 
«div class-'"uk-width-medium-1-2"»«img class-"uk-thumbn: 
«/div» 
«/div» 


El 
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这 单 /Overlay 


创建 拥有 不 同样 式 的 图 片 谈 罩 效果 。 
用 法 


素 添 加 .uk-overlay 类 。 为 一 个 子 元 素 添加 .uk-overlay-panel 类 创建 虽 实 
的 遮 章 面板 。 通 常 你 需要 使 用 &lt;figure 和 &lt;figcaption&gt; 元 素 。 


Example 


Title 


Lorem ipsum dolor sit amet, consetetur 


sadipscing elitr Lal 





Markup 


«figure class-"uk-overlay"» 

«img src="" widthz"" heightz"" alt=""> 

«figcaption class-"uk-overlay-panel'"»...«/figcaption- 
«/figure» 


通过 hover 拨 动 遮 音效 果 


默认 情况 下 ， 庶 单 层 是 可 见 的 。 添 加 .uk-overlay-hover 类 到 遮 单 层 的 容 
3c 3I, 3 F A 85 T i fe hoverdi zb AUR. o 


Er: 
" 


Example 
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Title 


Lorem ipsum dolor sit amet, consetetur 


E La] 





«figure class="uk-overlay uk-overlay-hover"> 

«img src="" width="" height="" alt=""> 

«figcaption class="uk-overlay-panel">...</figcaption> 
</figure> 


active & 3 %8 X. /Toggle on active 


想 要 在 庶 章 层 的 父 容器 处 于 actvie 状 态 时 拨 动 遮 章 层 ， 添加 
.uk-overlay-active 类 即 可 。 这 会 在 诸如 用 在 幻灯 片 等 情况 下 带 来 很 多 方便 。 


Lorem ipsum dolor sit amet, consetetur 
sadipscing elitr. 





Markup 
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<figure class="uk-overlay"> 

<img src="" width="" height="" alt=""> 

«figcaption class-"uk-overlay-panel uk-overlay-background"»...- 
</figure> 


a  ” B 





遮 章 层 的 图 标 


基本 上 可 以 把 任意 内 容 放 在 记 单 层 上 面 。 你 也 可 以 添加 .uk-overlay-icon 类 到 
这 单 面板 中 ， 将 会 显示 一 个 图 标 。 


Example 





Markup 


<figure class="uk-overlay"> 

<img src="" width="" height="" alt=""> 

«figcaption class-"uk-overlay-panel uk-overlay-icon"></figcapt: 
</figure> 


三 





遮 单 定位 


默认 地 ， 诞 单 层 从 左上 角 开 始 履 盖 整 个 父 容器 。 要 想 定位 和 修剪 庶 黑 层 ， 添 加 以 下 
类 中 的 一 个 到 庶 单 面板 中 即 可 。 


遮 单 /Overlay C 


Ulkit P x x 


Class 
.uk-overlay-top 
.uk-overlay-bottom 
.uk-overlay-left 


.uk-overlay-right 


Example 


Overlay Top 


Lorem ipsum dolor sit amet. 


Overlay Left 


Lorem ipsum dolor sit amet. 


Markup 


«figure class-"uk-overlay"» 


描述 
遮 章 层 顶 部 对 齐 
iB XE JU A 
& X E 
ik XE E 


x 


使 


Š 


使 


x 











Overlay Bottom 


Lorem ipsum dolor sit amet. 


Overlay Right 


Lorem ipsum dolor sit amet. 





«img src="" widthz"" heightz"" alt=""> 
«figcaption class="uk-overlay-panel uk-overlay-top'"»...«/figca[ 


</figure> 


mi — g 


HEX 


i& € [Overlay 
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XS EE TEX GEXUE ^ ERARA .uk-overlay-panel 的 &lt;img&gt; 元 
XA .uk-overlay-image 类 名 。 


Example 


由 





Markup 


«figure class-'"uk-overlay'» 

«img src="" widthz"" heightz"" alt=""> 

«img class-"uk-overlay-panel uk-overlay-image" srcz"" width="" 
«/figure» 


[E [EE ][UUIUSC. ac E: 
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iE XE DIE AXCR 


BEA da dfe A RT VALER Z BORD EROR o RR RAT X P — 45038 XE da 
板 或 者 &lt;img&gt; 元 素 。 记 住 ， 这 玩意 只 能 与 .uk-overlay-hover 或 
.uk-overlay-active 组 合 使 用 。 
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Class 
.Uk-overlay-slide-top 
.Uk-overlay-slide-bottom 
.uk-overlay-slide-left 
.uk-overlay-slide-right 
.uk-overlay-fade 
.uk-overlay-scale 


.uk-overlay-spin 


.uk-overlay-grayscale 


NOTE 如 果 你 想 要 图 片 具 有 动画 效果 ， JE XE ES d SX T 


,UK-ignore 类 名 到 面板 。 这 样 ， 


Example 


P" 


Markup 


i& S /Overlay 


首 述 
添加 这 个 类 到 遮 单 面板， 使 它 由 顶部 滑 出 。 
添加 这 个 类 到 遮 章 面 板 ， 使 它 由 底部 滑 出 。 


x 


ES 


添加 这 个 类 到 遮 单 面板 ， 使 它 由 左边 滑 出 。 
添加 这 个 类 到 遮 单 面板 ， 使 它 由 右边 滑 出 。 
添加 这 个 类 到 遮 章 面板 或 图 片 ， 使 它 淡 入 。 


添加 这 个 类 到 图 片 使 它 放大 。 
添加 这 个 类 到 图 片 ， 使 它 向 右 轻 轻 旋转 。 


添加 这 个 类 到 图 片 ，hover 时 去 饱和 度 并 着 
色 。 


的 ” 7N 只 需要 添加 


它 就 能 无 视 ,uk-overlay-hover 的 效果 了 。 


— 


Lorem ipsurrt dolor sit 
amet. 





164 


Ulkit 中 文 文档 


<!-- This example is sliding in the overlay panel from the top --> 
<figure class="uk-overlay uk-overlay-hover"> 

<img src="" width="" height="" alt=""> 

«figcaption class-"uk-overlay-panel uk-overlay-slide-top">...<, 
</figure> 


<!-- This example is scaling up the image while the overlay panel : 
«figure class-"uk-overlay uk-overlay-hover'» 
«img class-z"uk-overlay-scale" srcz"" widthz"" heightz"" alt=""> 


«figcaption class-"uk-overlay-panel uk-ignore"»...«/figcaption: 
</figure> 


<!-- This example is spinning the image and sliding in the overlay 
«figure class="uk-overlay uk-overlay-hover"> 
«img class="uk-overlay-spin" srcz"" width="" height="" alt=""> 


«figcaption class="uk-overlay-panel uk-overlay-slide-top'»...«, 
</figure> 


EE 





i& €. £j flex 


你 可 以 使 用 Flex 组 件 4E dr AR KU 6 EJECPiE XE GA mik 


zu 
涉 
z 


Example 


Title 


Title 
Lorem ipsum dolor sit amet, consetetur 


sadipscing elitr. Lorem ipsum dolor.Sit amet, consetetur 


sadipscing elitr. 


Button 
Button 





Markup 


i& 3-/Overlay i 
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«!-- In this example the overlay panel is centered vertically and ! 
«figure class-"uk-overlay"» 
«img src="" widthz"" heightz"" alt=""> 
«figcaption class-"uk-overlay-panel uk-flex uk-flex-center uk-1 
<div>...</div> 


</figcaption> 
</figure> 
«!-- In this example the overlay panel is aligned to the bottom --: 


«figure class-"uk-overlay"» 
«img src="" widthz"" heightz"" alt=""> 
«figcaption class-"uk-overlay-panel uk-flex uk-flex-bottom'"-» 
<div>.. .</div> 
</figcaption> 
</figure> 


EIE 





ik X2 45 


将 整个 遮 单 层 作为 链接 ， 只 需要 将 &lt;a&gt; 元 素 放 入 到 遮 单 层 容器 ， 并 添加 
来 自 效果 组 件 的 .uk-position-cover 类 名 。 

重要 应 用 这 个 效果 时 ， 需 要 确保 已 经 移 除 了 带 有 其 他 容器 元 素 的 
&lt;figcaption&gt; ， 比 如 &lt;div&gt; 。 否 则 标签 不 能 生效 。 


Example 


Anchor 


Lorem ipsum dolor sit amet. 





Markup 


i& € /Overlay 


O) 
O 


«figure class-'"uk-overlay'» 
«img srcz"" widthz"" height="" alt=""> 
«div class-"uk-overlay-panel"»...«/div» 
«a class-"uk-position-cover" href=""></a> 
«/figure» 


NOTE X 1E i& 3E n JE 7] fed o A RERO ESSE ARI PT o 


文本 
实用 的 内 容 文本 样式 类 的 集合 。 
文本 样式 


Ulkit 提 供 了 各 种 各 样 的 文本 效果 用 来 风格 化 你 的 文本 。 


类 描述 
.Uk-text-small 添加 这 个 类 来 缩小 字体 尺寸 。 
.Uk-text-large 添加 这 个 类 来 增 大 字体 尺寸 。 

. uk-text -bold 添加 这 个 类 创建 粗 体 文本 。 
.Uk-text-muted 添加 这 个 类 来 淡化 文本 。 
.Uk-text-primary 为 额外 的 文本 信息 添加 这 个 类 。 
.Uk-text-success 添加 这 个 类 来 标示 成 功 。 
.Uk-text-warning 添加 这 个 类 来 标示 警告 。 
.Uk-text-danger 添加 这 个 类 来 标示 危险 。 


添加 这 个 类 ， 使 文本 的 色彩 在 艳丽 的 色彩 或 图 片 背景 


.Uk-text-contrast : NEA 
上 更 有 可 读 性 。 它 通常 会 是 白色 。 


文本 对 齐 


使 用 以 下 的 类 来 对 齐 文本 
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Class 


.uk-text-left 


.uk-text-left-small 


.uk-text-left-medium 


.uk-text-right 


.uk-text-center 


.uk-text-center-small 
.uk-text-center-medium 


.Uk-text-justify 


Example 


Lorem ipsum dolor sit 

amet, consetetur 

sadipscing elitr 
.uk-text-left 


Lorem ipsum dolor sit 
amet, consetetur 
sadipscing elitr. 


.uk-text-center-small 


垂直 对 齐 


添加 这 些 Class 中 的 一 个 来 使 文本 与 茶 个 对 象 重 直 对 齐 。 


Class 


,UK-text-top 
.Uk-text-middle 


.Uk-text-bottom 


Example 


Description 
文本 左 对 齐 
只 在 小 屏幕 设备 上 文本 左 对 齐 
在 中 小 型 屏幕 设备 上 左 对 齐 
X Ad E 
文本 水 平 居 中 


只 在 小 屏幕 设备 上 文本 水 平 居 中 
在 中 小 型 屏幕 设备 上 文本 水 平 居 中 


文本 两 端 对 齐 


Lorem ipsum dolor sit 
amet, consetetur 
sadipscing elitr. 
.uk-text-right 


Lorem ipsum dolor sit 
amet, consetetur 
sadipscing elitr. 


.uk-text-center-medium 


Lorem ipsum dolor sit 
amet, consetetur 
sadipscing elitr. 


.Uk-text-center 


Lorem ipsum dolor Sit 
amet consetetur 
sadipscing elitr. 


.uk-text-justify 


描述 
顶部 对 齐 文本 
垂直 居中 文本 
底部 对 其 文本 


文本 换行 
添加 以 下 类 中 的 一 个 到 3 


Class 
.UK-text-truncate 
.uk-text-break 


.uk-text-nowrap 


Lorem ipsum dolor sit amet, con 


文本 的 容 


Lorem ipsum dolor sit amet 
consetetur sadipscing elitr sed 


X 


A 4s 


， 以 使 文本 换行 。 
描述 n 


过 截断 文本 ， 防 止 文 本 多 行 显 示 


如 果 文 本 长 度 将 超过 容器 宽度 时 ， 强 制 换行 。 


防止 文本 被 截断 成 多 行 


显示 。 


Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac 
.uk-text-nowrap 


diam nonumy eirmod tempor 
invidunt. Lorem ipsum dolor sit 
amet, consetetur sadipscing elit 


.uk-text-break 


用 法 


类 名 即 可 生效 。 


.uk-column-1-* 


Class Description 
.uk-column-1-2 将 文本 段落 分 割 成 两 列 
.uk-column-1-3 将 文本 段落 分 割 成 三 列 
.uk-column-1-4 将 文本 段落 分 割 成 四 列 
.Uk-column-1-5 将 文本 段落 分 割 成 五 列 
.Uk-column-1-6 将 文本 段落 分 割 成 六 列 


Example 


nostrud exercitation ullamco 


Lorem ipsum dolor sit amet, 
consectetur adipiscing elit, sed 
do eiusmod tempor incididunt ut 
labore et dolore magna aliqua 
Ut enim ad minim veniam, quis 


Markup 


laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute 
irure dolor in reprehenderit in 
voluptate velit esse cillum dolore 


«p class-"uk-column-1-3"»...«/p» 


响应 式 布局 中 的 列 


eu fugiat nulla pariatur 
Excepteur sint occaecat 
cupidatat non proident, sunt in 
culpa qui officia deserunt mollit 
anim id est laborum. 


列 组 件 通用 提供 了 只 在 特定 视 口 宽度 中 生效 的 响应 式 类 名 


Ulkit 中 文 文档 


Class 
.uk-column-* 


.uk-column-small-* 


.uk-column-medium-* 


.uk-column-large-* 


.uk-column-xlarge-* 


Example 


Lorem ipsum dolor sit amet, 
consectetur adipiscing elit, sed 
do eiusmod tempor incididunt ut 
labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis 


Markup 


ES 
ab 
gi 
a 
x 


只 在 设备 宽度 


nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea 


commodo consequat. Duis aute 


irure dolor in reprehenderit in 


voluptate velit esse cillum dolore 


Description 


都 生效 


à 480px 以 上 时 生效 
度 768px 以 上 时 生效 
度 960px 以 上 时 生效 
度 1200px 以 上 时 生效 


eu fugiat nulla pariatur 
Excepteur sint occaecat 
cupidatat non proident, sunt in 
culpa qui officia deserunt mollit 
anim id est laborum 


«p class-"uk-column-xlarge-1-4 uk-column-large-1-3 uk-column-mediur 


| ———— Ew] 
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动画 
收集 了 一 些 可 以 流畅 运行 在 你 的 页 面 中 的 简单 动画 。 


用 法 


要 使 用 这 个 组 件 的 话 ， 添加 任意 一 个 .uk-animation-* 类 到 一 个 元 素 中 ， 它 就 
会 以 一 个 炫 酷 的 动画 效果 淡 入 。 这 些 类 通常 是 使 用 JavaScript 实 现 动 画 的 具体 行为 


的 。 


Class € 
.Uuk-animation-fade 
.Uk-animation-scale-up 
.uk-animation-scale-down 
.uk-animation-slide-top 
.uk-animation-slide-bottom 
.Uuk-animation-slide-left 
.Uuk-animation-slide-right 
.Uuk-animation-shake 


.Uuk-animation-scale 


Example 


点 击 任意 方 框 观 看 动画 。 


Fade Scale up 
Slide top Slide bottom 
Scale 


Markup 


描述 
元 素 淡 入 
元 素 由 小 变 大 
Xd AEG 
元 素 从 顶部 滑 入 
元 素 从 底部 滑 入 
元 素 从 左边 滑 
元 素 从 右边 滑 入 
ARRA 
元 素 由 大 变 小 而 不 改变 透明 度 


Scale down Shake 


Slide left Slide right 


«div class-"uk-animation-fade"'"»...«/div» 


反 向 动画 /Reverse modifier 


默认 地 ， 所 有 动画 都 是 元 素 出 现 的 效果 。 要 把 动画 反 向 ， 添 加 


.uk-animation-reverse 类 就 行 啦 。 


Example 


点 击 任意 方 框 观 看 动画 。 


Fade Scale up 


Scale down Shake 

Slide top Slide bottom Slide left Slide right 
Scale 
Markup 


«div class-"uk-animation-fade uk-animation-reverse"»...«/div» 


持续 时 间 修 改 /Duration modifier 


要 把 动画 持续 时 间 延 长 到 10 秒 ， 就 添加 ,uk-animation-10 类 。 


Example 


Slide right 


Markup 


«div class-"uk-animation-slide-right uk-animation-10"»...«/div» 


源头 修改 /Origin modifier 


默认 情况 下 ， 缩 放 动 画 的 源头 是 中 间 。 修 改 这 个 行为 ， 添 加 以 下 类 中 的 一 个 就 行 。 


Class 类 


.uk-animation-top-left 


.uk-animation-top-center 


.uk-animation-top-right 


.uk-animation-middle-left 


.uk-animation-middle-right 


.uk-animation-bottom-left 


.uk-animation-bottom-center 


.uk-animation-bottom-right 


Example 


Top Left 


Middle Right 


Top Center 


Bottom Left 


描述 
动画 从 左上 和 角 展 开 
动画 从 上 方 中 间 展开 
动画 从 右上 角 展 开 
动画 从 左边 中 间 展 开 
动画 从 右边 中 间 展 开 


动画 从 左下 角 展 开 
动画 从 底部 中 间 展 开 
动画 从 右 下 角 展 开 
Top Right Middle Left 
Bottom Bottom 
Center Right 


.uk-animation-hover 类 到 动画 元 素 本 身 或 


Fade Slide right 


Markup 


«div class-"uk-animation-hover uk-animation-fade"»...«/div» 


«div class-"uk-animation-hover"» 
«div class-"uk-animation-slide-right"»...«/div» 
«/div» 


tÆ Contrast 


当 元 素 被 放置 在 有 色 背 景 或 图 片上 时 ， 使 用 对 比 度 组 件 增强 元 素 的 外 观 。 


用 法 


要 使 用 这 个 组 件 的 话 ， 只 需要 为 容器 或 者 你 想 要 调整 其 色彩 的 元 素 添加 
.Uk-contrast 类 。 文 本 ， 按 钮 ，Nav component 中 的 侧 边 导航 (Nav Side) > 
子 导 航 组 件 的 分 隔 线 和 胶 有 起 效果， 图标， 表单 组 件 中 的 默认 表单 ， 以 及 列表 组 件 中 
的 列表 线 都 会 自动 改变 它们 的 外 观 。 


当 内 容 被 放置 在 块 组 件 中 或 者 放置 在 图 片上 时 ， 对 比 度 组 件 将 带 来 很 大 的 方便 。 


Example 


Text Button Subnav 


Lorem ipsum dolor sit amet, Button Item 


consectetur adipisicing elit. 
Disabled 
Icon 


Form 
NAV SIDE 


ov@9 


Item 





Markup 


«div class-"uk-contrast"»...«/div» 


JAVASCRIPT 214} 


下 拉 菜 音 


为 可 拨 动 的 下 拉 菜 单 定义 不 同 的 样式 


用 法 


任意 内 容 ， 比 如 一 个 按钮 ， 都 可 以 作为 切换 器 用 来 切换 下 拉 菜 单 。 只 需 用 一 个 带 
data-uk-dropdown 属性 的 &lt;div&gt; ARKE ERIT o Ze 
.Uk-dropdown 类 到 一 个 子 级 的 &lt;div&gt; 元 素来 创建 下 拉 菜 单 本 身 。 一 个 

下 拉 菜 单 可 以 通过 鼠标 悬 停 或 者 的 点 击 的 方式 来 拨 动 。 


Data 属性 描述 


筷 标 悬 停 打 开 下 拉 菜 单 ， 并 添加 
一 个 很 小 的 延迟 ， 这 样 下 拉 菜 
便 不 会 在 你 停止 在 拨 动 器 上 巧 停 
时 立即 消失 。 


通过 点 击 拨 动 器 来 打开 下 拉 菜 
data-uk-dropdownz" (mode: 'click']" *o Bok&dco FEARXXAXE 
H] » 


data-uk-dropdown 


重要 为 了 应 用 一 个 下 拉 菜 单 ， 其 父 元 素 拥有 一 个 能 恰当 地 将 二 者 对 齐 的 相对 位 置 是 
很 重要 的 。 很 多 组 件 默认 地 创建 了 这 样 的 定位 场景 ， 比 如 按钮 ， 导 航 栏 ， 二 级 导 
航 和 选项 卡 等 组 件 。 


示例 


鼠标 来 县 停 我 呀 点 击 我 呀 v 


在 这 个 例子 理 我 


ltem 


t r item 
| Code Another item 


«div data-uk-dropdown; Item 
VEU UE Another item 
一 £v PES, 
<div>... </div> 
Separated item 


rg X e 


注意 在 这 个 例子 理 我 们 使 用 了 按钮 组 件 作为 拨 动 器 。 


Code 


<!-- 这 是 JavaScript 关 联 的 容器 --» 
<div data-uk-dropdown> 


<1-- 拨 动 下 拉 菜 单 的 元 素 --> 
«div»...«/div» 


<!-- 这 是 下 拉 菜 单 --> 
«div class-"uk-dropdown"»...«/div» 


«/div» 


<1-- 这 是 关联 了 点 击 模式 的 JavaScript 的 容器 --» 
«div data-uk-dropdownz"[mode:'click'j"» 


<1-- 拨 动 下 拉 菜 单 的 元 素 --> 


«div»...«/div» 


<!-- 这 是 下 拉 菜 单 --> 
«div class="uk-dropdown">...</div> 


«/div» 


在 县 停 模式 下 延迟 下 拉 菜 六 


你 可 以 设置 一 个 以 毫秒 为 单位 的 delay 参数 来 防止 下 拉 菜 单 立 即 显示 出 来 。 


来 县 停 我 呀 > 
Item 
Another item 
item 


Another item 


Separated item 


Code 


<div class-"uk-dropdown" data-uk-dropdown="{delay: 1000}"> 


</div> 


带 有 导航 菜单 的 下 拉 菜 六 


下 拉 菜 单 可 以 包含 一 个 导航 菜单 ， 只 需 添 加 .uk-nav 类 和 
.uk-nav-dropdown 修饰 类 到 一 个 &lt;ul&gt; 元 素 中 。 


Code 


«div class="uk-dropdown"> 
«ul class-"uk-nav uk-nav-dropdown"»...«/ul» 


«/div» 
对 齐 修饰 


给 下 拉 菜 单 添加 对 齐 样式 ， 只 需 添加 以 下 pos:'' 参数 中 的 一 个 到 data 属 性 就 行 
Ta 


参数 描述 
pos: 'bottom-left' 默认 。 下 方 左 对 齐 
pos: 'bottom-center' 下 方 居 中 对 齐 
pos:'bottom-right' 下 方 右 对 齐 
pos:'top-left' 上 方 左 对 齐 
pos:'top-center' 上 方 居 中 对 齐 
pos: 'top-right' 上 方 右 对 齐 
pos:'left-top' 左 侧 顶部 对 齐 
pos:'left-center' 左 侧重 直 居 中 对 齐 
pos:'left-bottom' 左 侧 底部 对 齐 
pos:'right-top' 右 侧 顶 部 对 齐 
pos:'right-center' 右 侧重 直 居 中 对 齐 
pos:'right-bottom' 右 侧 底部 对 齐 


Example 


Bottom Center v Top Right 4 «Left Center Right Top a 


Markup 
«div data-uk-dropdownz"[(pos:'bottom-center'j"» ... </div> 
«div data-uk-dropdownz"(pos:'top-right')"» ... </div> 


«div data-uk-dropdownz"[pos:'left-center']"» ... </div> 


«div data-uk-dropdownz"[pos:'right-top']"» ... </div> 


调整 下 拉 菜 单 


调整 下 拉 菜 单 ， 只 需 添加 data-uk-dropdown="{justify:'#ID'}" 属性 。 需 要 
调整 的 下 拉 菜 单 的 父 元 素 需 要 有 一 个 标记 id， 这 样 下 拉 菜 单 便 会 扩 宽度 至 这 个 被 标 
记 的 元 素 的 宽度 。 


示例 
Justify v 
Item 
Another item 


Item 


Another item 


Separated item 


Markup 


«1-- 这 是 需要 调整 的 下 拉 菜 单 的 父 元 素 --> 
«div idz"my-id"» 


«1-- 这 是 关联 了 JavaScript 的 容器 --» 


«div class-"uk-button-dropdown" data-uk-dropdownz"(justify: '#m\ 


<1-- 拨 动 下 拉 菜 单 的 元 素 --> 
«button class-"uk-button"»...«/button» 


<1-- 这 是 下 拉 菜 单 --> 
«div class-"uk-dropdown"»...«/div» 
«/div» 


«/div» 





下 拉 菜 单 自动 翻转 


默认 情况 下 ， 当 下 拉 菜 单 超出 了 视 口 边缘 便 会 自动 地 翻转 。 如 果 你 想 根据 容器 的 边 


A 
界 来 翻转 它 ， 只 需 添 加 data-uk-dropdown="{boundary:'#ID'}" AH > RA 
性 中 的 ID 对 应 容器 的 ID 。 


示例 
Boundary v 
Item 
Another item 
Item 
Another item 


Separated item 


Code 


«div idz"my-id"» 


«div class-"uk-button-dropdown" data-uk-dropdownz" (boundary: ' Zr 
«/div» 


z —] 








网 格 


你 甚至 可 以 在 下 拉 菜 单 中 放置 一 个 包含 导航 或 者 其 它 内 容 的 网 格 组 件 。 只 需 用 一 个 

A .uk-grid 类 的 &lt;div&gt; 元 素 包 庄 着 这 些 内 容 。 为 了 优化 下 拉 菜 单 中 

的 网 格 ， 需 要 添加 .uk-dropdown-grid 类 名 。 添 加 一 个 
.Uk-dropdown-width-* 类 名 到 网 格 的 子 元 素 ， 最 多 可 以 并 列 5 个 列 。 


Example 
2 Columns v 3 Columns v 
Item Item 
Another item Another item 
Item Item 
Another item Another item 
Separated item Separated item 


Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor 
incididunt.Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor 
incididunt.Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor 
incididunt. 


Markup 


«div class-"uk-dropdown uk-dropdown-width-2"» 


«div class-"uk-grid uk-dropdown-grid"» 
«div class-"uk-width-1-2"» 
«ul class-"uk-nav uk-nav-dropdown uk-panel"»...«/ul» 
«div class-"uk-panel"»...«/div» 
«/div» 


«div class-'uk-width-1-2"» 
«div class-"uk-panel"»...«/div» 
«/div» 
«/div» 


«/div» 


响应 式 行为 


在 狭 罕 的 视 口 中 ， 比 如 手机 上 ， ue qu 间 来 扩展 下 拉 菜 单 。 在 这 种 1 青 况 
Y s TAX 单 会 翻转 它 的 对 齐 准 线 。 如 果 还 是 没有 足够 的 空间 ， 网 格 列 会 占 满 宽度 
并 在 下 拉 菜 单 中 垂直 地 堆 登 。 


缩小 调整 


默认 情况 下 ， 下 拉 菜 单 有 一 个 国定 的 宽度 并 且 文字 会 切换 到 下 一 行 。 如 果 你 想 要 你 
的 下 拉 菜 单 更 小 巧 ， 以 使 它 延伸 到 内 容 的 宽度 而 不 再 使 文本 换行 ， 添 加 
.uk-dropdown-small 类 即 可 。 这 对 一 个 按钮 下 拉 菜 单 是 很 有 用 的 。 


示例 


Dropdown v 


Item 


Another item 


Item 


Another item 


Separated item 


Code 


«div class-"uk-dropdown uk-dropdown-small"»...«/div» 


可 滚动 的 修饰 


给 下 拉 菜 单 添加 固定 高 度 ， 使 它 的 内 容 可 以 滚动 ， 只 需 添 加 
.uk-dropdown-scrollable 类 。 


示例 


Dropdown v 


Item 


Another item 


Item 
Item 
tem 


Ac kie e iiaa 
oN ?a 


Code 


«div class-"uk-dropdown uk-dropdown-scrollable">...</div> 


导航 栏 中 的 修 


下 拉 菜 单 是 导航 栏 组 件 的 基本 组 成 部 分 。 只 需 添加 
下 拉 菜 单 中 ， 这 样 下 拉 菜 单 便 会 完美 地 融入 导航 栏 中 。 


示例 
Active tem 


| Code 


《nay class="uk—navbs 


<ul class=" uk—ns 


i class="*t 


Code 


Parent * 


item 


Another item 


HEADER 
Item 


Another item 


Separated item 


.uk-dropdown-navbar 类 到 


«nav class-"uk-navbar"» 
«ul class-"uk-navbar-nav"» 


«1-- 这 是 关联 了 JavaScript 的 容器 --» 
«li class="uk-parent" data-uk-dropdown> 


<1-- 拨 动 下 拉 菜 单 的 菜单 项 --> 
«a hrefz'"'"»,.,..,«/a» 


<1-- 这 是 下 拉 菜 单 --> 
«div class-"uk-dropdown uk-dropdown-navbar"» 
«ul class-"uk-nav uk-nav-navbar'» 
<li><a hrefz"'"»...«/a»«/li» 
«/ul» 
«/div» 


</li> 
</ul> 
</nav> 


宝 白 下 拉 菜 


有 时 你 需要 用 到 下 拉 菜 单 的 功能 但 不 想 要 它 的 样式 。 这 时 你 直接 用 
.uk-dropdown-blank 来 替代 .uk-dropdown 就 行 了 。 


Example 


Hover me v 


; j 
Title 
Lorem ipsum dolor sit 
amet, consectetur 
adipisicing elit 
Title 


Lorem ipsum dolor sit amet, consectetur adipisicing elit. 


NOTE 在 这 个 例子 中 ， 我 们 使 用 了 面板 组 件 来 设 定 下 拉 菜 单 的 样式 。 


Markup 


«div class-"uk-dropdown-blank uk-panel uk-panel-box'» 


按钮 中 的 下 拉 菜 单 


按钮 组 件 中 的 按钮 可 以 用 来 切换 下 拉 菜 单 。 


示例 
Item 


Another item 


ropdown' data-uk-dropdown? 


Item 


Another item bito s. Obottino 
Separated item 


-—eceddaun nl—drandnwun—cmall”y 


Code 


«1-- 这 是 关联 了 JavaScript 的 容器 --» 
«div class-"uk-button-dropdown" data-uk-dropdown> 


<1-- 这 是 切换 下 拉 菜 单 的 按钮 --> 
«button class="uk-button">...</button> 


«1-- 这 是 下 拉 菜 单 --> 
«div class-"uk-dropdown uk-dropdown-small"- 
«ul class-"uk-nav uk-nav-dropdown'- 
<li><a href="">., ..</a></li> 
<li><a href="">. ..</a></li> 
</ul> 
</div> 


</div> 


.</div> 


使 用 按钮 组 件 中 的 按钮 组 ， 将 按钮 分 作 一 个 标准 的 按钮 和 一 个 下 拉 菜 单 拨 动 器 。 


示例 
Item 


Another item 


roup'? 


Item 
utton' 5... €/button? 
Another item 


TUA 


Separated item an=" {mode:’ click }”> 


Code 


«div class-"uk-button-group"» 


<!-- 这 是 一 个 按钮 --» 
«button class="uk-button">...</button> 


<1-- 这 是 关联 了 JavaScript 的 容器 --> 
«div data-uk-dropdown="{mode:'click'}"> 


«1-- 拨 动 下 拉 菜 单 的 按钮 --> 


«a href="" class-"uk-button'»...«/a» 
< cuu D 


«div class-"uk-dropdown uk-dropdown-small"- 
«ul class-'"uk-nav uk-nav-dropdown"- 
<li><a href="">. ..</a></li> 
<li><a href="">. ..</a></li> 

</ul> 
</div> 


</div> 
</div> 


子 导 航 中 的 下 拉 菜 音 


下 拉 菜 单 也 可 以 用 在 子 导航 组 件 中 。 


示例 
E en moe- 


Code 
<ul class="uk-subnav uk-subnav-pill"> 
<li><a href="">. ..</a></li> 


<1-- 这 是 关联 了 JavaScript 的 容器 --> 
«li data-uk-dropdown="{mode: 'click'}"> 


<1-- 拨 动 下 拉 菜 单 的 导航 元 素 --> 

«a href="">., ..</a> 

<!-- 这 是 下 拉 菜 单 --> 

«div class-"uk-dropdown uk-dropdown-small"- 
«ul class-'"uk-nav uk-nav-dropdown"- 

<li><a href="">., ..</a></li> 

</ul> 

</div> 


</li> 
</ul> 


选项 卡 中 的 下 拉 菜 单 
下 拉 菜 单 可 以 用 在 选项 卡 组 件 中 。 


示例 


Tab One Tab Two More v 


Code 


«ul class-"uk-tab" data-uk-tab» 
«li»«a hrefz'"'"»,.,..«/a»«/li» 


<!-- 这 是 关联 了 JavaScript 的 容器 --» 
«li data-uk-dropdownz" (mode: 'click'}"> 


«1-- 拨 动 下 拉 菜 单 的 选项 卡 标 签 --> 
«a hrefz""»...«/a» 


<1-- 这 是 下 拉 菜 单 --> 

«div class-"uk-dropdown uk-dropdown-small"- 
«ul class-'"uk-nav uk-nav-dropdown'- 

<li><a href="">., ..</a></li> 

</ul> 

</div> 

</li> 
</ul> 


JavaScript 选项 
这 是 关于 如 何 通过 属性 设置 选项 的 示例 : 


data-uk-dropdownz" (mode: 'hover ' " 


"T 
Xo 值 
pos string 
mode hover 
click 
remaintime integer 
、 CSS 
ustif 
J i selector 
boundary window 
delay integer 
hoverDelayIdle integer 
preventflip mixed 


事件 


可 用 的 


你 可 以 为 自 定 义 的 功能 绑 定 回调 事件 。 


事件 名 称 
show.uk.dropdown 
hide.uk.dropdown 


stack.uk.dropdown 


Example 


默认 值 描述 
bottom- A 
left TEREPRE 
hover 触发 下 拉 菜 单 的 行为 
前 的 等 待 时 间 
false 按 指定 元 素 的 宽度 拉 伸 下 拉 菜 电 
CSS 选 ”用 被 标注 的 元 素来 保持 下 拉 菜 六 
RE 的 可 见 性 
是 停 模式 下 ， 下 拉 荣 单 被 显示 前 
的 延迟 时 间 ， 以 毫秒 为 单位 。 
以 毫秒 为 单位 的 ， 从 一 个 打开 下 
250 拉 菜 单 将 鼠标 移 至 另 一 个 下 拉 菜 
单 这 一 过 程 中 的 延 时 。 
false 防止 下 拉 菜 单 自动 翻转 
描述 
下 拉 菜 单 显示 时 触发 
下 拉 菜 单 隐藏 时 触发 


当下 拉 菜 单 堆 蛋 以 适应 屏幕 时 触发 


$('[data-uk-dropdown]').on('show.uk.dropdown', function()( 


// custom code... 


3); 


CSS 选项 


添加 类 名 .uk-dropdown-close 到 下 拉 菜 单 容器 或 菜单 条 目 ， 用 于 点 击 该 条 目 时 
隐藏 下 拉 菜 单 to dropdown container or to item to hide dropdown when user click 
on item. 


模 态 对 话 框 
创建 拥有 不 同样 式 和 过 渡 形 式 的 模 态 对 话 框 。 


用 法 


模 态 对 话 框 由 一 个 庶 章 层 ， 一 个 对 话 框 和 一 个 关闭 按钮 组 成 。 


Class X 描述 
添加 这 个 类 到 一 个 &lt;div&gt; 元 素 中 创建 对 话 框 
.uk-modal RRP &dk3Xudmkb hGiiSAE:sJT8bXx 


动 这 个 元 素 ， 必 须 为 它 添加 id 。 


为 一 个 后 代 &lt;div&gt; 元 素 添加 这 个 类 ， 创 建 对 


.uk-modal-dialog MGE 


添加 这 个 类 到 &lt;a&gt; 或 &lt;button&gt; 元 
素 ， 用 来 创建 对 话 框 中 的 关闭 按钮 。 推 荐 为 按钮 添加 
关闭 按钮 组 件 中 的 .uk-close 类 ， 以 赋予 适当 的 样 
式 ， 你 也 可 以 使 用 文字 或 者 图 片 。 


.uk-modal-close 


你 可 以 使 用 任意 元 素来 触发 模 态 对 话 框 。 一 个 &lt;a&gt; 元 素 需 要 链接 到 模 态 
对 话 框 的 id 。 为 了 使 必要 的 JavaScript 生 效 ， 需 要 添加 data-uk-modal 属性 。 如 
果 你 使 用 的 是 其 他 元 素 ， 比 如 按钮 ， 只 需要 添加 

data-uk-modal-"[target: 4ID')" 元 素 指 向 模 态 对 话 框 的 。 


Example 


Headline 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 


exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
anim id est laborum 





Headline 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 
officia deserunt mollit anim id est laborum. 


Markup 


<!-- 触发 模 态 对 话 框 的 锚 --> 
«a href="#my-id" data-uk-modal>...</a> 


<1-- 触发 模 态 对 话 框 的 按钮 - -> 
«button class-"uk-button" data-uk-modal="{target: '#my-id'}">...</b! 


<1-- 模 态 对 话 框 --> 
«div id-"my-id" class-"uk-modal'"- 
«div class-"uk-modal-dialog'"» 
«a class-'"uk-modal-close uk-close"»«/a» 


«/div» 
«/div» 





JavaScript 选项 


歌 认 地 ， 点 击 遮 草 层 会 自动 关闭 模 态 对 话 框 。 如 果 要 阻止 它 ， 只 需要 添加 
data-uk-modal-"[target:'4ID',bgclose:false)" 属性 。 


模 态 对 话 框 的 标题 和 脚注 /Modal header and footer 

你 可 以 为 模 态 对 话 框 创建 标题 和 脚注 ， 使 它们 与 正文 内 容 分 离开 。 只 需要 添加 
.uk-modal-header 或 者 .uk-modal-footer 类 到 模 态 对 话 内 部 的 
&lt;div&gt; 元 素 即 可 。 


Example 


Ulkit 中 文 文档 


Headline 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis 
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
deserunt mollit anim id est laborum 


Markup 


«div class-"uk-modal"» 
«div class-z"uk-modal-dialog"» 
«div class-"uk-modal-header"»...«/div» 
«div class-"uk-modal-footer"'"»...«/div» 


«/div» 
«/div» 


模 态 对 话 框 的 说 明文 字 /Modal caption 


你 还 可 以 为 模 态 对 话 框 创建 一 个 显示 在 它 外 部 的 说 明文 字 。 只 需要 天 
.Uk-modal-caption 类 到 模 态 对 话 框 内 部 的 &lt;div&gt; 元 素 即 可 。 


Example 


模 态 对 话 框 
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Headline 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 


exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
anim id est laborum. 





Markup 


«div class-"uk-modal"» 
«div class-'"uk-modal-dialog"» 
«div class-"uk-modal-caption"»...«/div» 
«/div» 
«/div» 


J 箱 修饰 /Lightbox modifier 


创建 看 起 来 像 灯箱 的 模 态 对 话 框 ， 只 需要 添加 .uk-modal-dialog-lightbox 
类 。 如 果 你 想 要 把 图 片 显示 在 灯箱 一 样 的 模 态 对 话 框 中 时 ， 这 会 很 有 用 。 关 闭 按钮 
会 自动 调整 到 对 话 框 的 相应 位 置 。 


Example 


模 态 对 话 框 


Markup 


<!-- 触发 模 态 对 话 框 的 锚 --> 
«a href="#my-id" data-uk-modal>...</a> 


<!-- 模 态 对 话 框 --> 
«div id-"my-id" class-"uk-modal'"- 
«div class-"uk-modal-dialog uk-modal-dialog-lightbox"» 


«a hrefz"" class-"uk-modal-close uk-close uk-close-alt"»«/: 
«img srcz"" alt=""> 
«/div» 


«/div» 


注意 在 灯箱 模 态 对 话 框 中 创建 关闭 按钮 时 ， 我 们 依然 推荐 添加 
.üuk-close-alt 类 来 赋予 你 的 关闭 按钮 一 个 适当 的 样式 。 





空白 模 态 框 


重 置 样式 ， 比 如 padding 和 margin, 添 加 .uk-modal-dialog-blank 类 名 即 
可 。 如 果 你 想 创建 全 屏 模 态 框 时 ， 可 以 使 用 它 。 此 时 ， 你 还 需要 用 到 效 3 中 的 
.Uk-height-viewport 类 名 ， 使 得 模 态 框 填充 整个 视 口 高 度 。 
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Example 


Headline 


Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, 
sed do eiusmod tempor 
incididunt ut labore et dolore 
magna aliqua. Ut enim ad 
minim veniam, quis nostrud 
exercitation ullamco laboris 
nisi ut aliquip ex ea 
commodo consequat. Duis 
aute irure dolor in 
reprehenderit in voluptate 
velit esse cillum dolore eu 
fugiat nulla pariatur. 
Excepteur sint occaecat 


cupidatat non proident, sunt 
in culpa qui officia deserunt 
mollit anim id est laborum. 





«!-- This is the anchor toggling the modal --> 
«a hrefz'"Zmy-id" data-uk-modal»...«/a» 


«!-- This is the modal --> 
«div id-"my-id" class-'uk-modal"» 


«div class-"uk-modal-dialog uk-modal-dialog-blank"»...«/div» 
«/div» 


模 态 对 话 框 中 的 旋转 /Modal spinner 


要 在 模 态 对 话 框 中 放 入 一 个 旋转 的 图 标 ， 添 加 .uk-modal-spinner 类 到 模 态 对 
话 框 中 的 &lt;div&gt; 元 素 即 可 。 


Example 
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Markup 


«div class-"uk-modal"» 
«div class-"uk-modal-dialog'"» 
«div class-"uk-modal-spinner"»...«/div» 
«/div» 
«/div» 


居中 模 态 对 话 框 


垂直 居中 模 态 对 话 框 ， 添 加 {center:true} 选项 到 它 的 data 属 性 即 可 。 


Example 


Headline 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 


incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
anim id est laborum. 





Markup 


«a href="#my-id" data-uk-modal-"(center:truej"»«/a» 


大 对 话 框 修 饰 


为 模 态 对 话 框 添加 与 网 页 相同 的 宽度 ， 只 需要 添加 .uk-modal-dialog-large 
Xo 


Example 


N 
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Headline 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
mollit anim id est laborum 





Markup 


«div class-"uk-modal-dialog uk-modal-dialog-large"»...«/div» 


` 


模 态 对 话 框 中 溢出 容器 


你 还 可 以 把 模 态 对 话 框 的 内 容 显 示 在 可 滚动 的 容器 中 。 只 需 添加 
.Uk-overflow-container 类 到 模 态 对 话 框 中 的 &lt;div&gt; 元 素 即 可 。 模 
态 对 话 框 会 自动 扩展 填充 到 页 面 的 高 度 。 


Example 


Headline 


Some text above the scrollable box 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
mollit anim id est laborum. 


Overflow container 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
mollit anim id est laborum. 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
mollit anim id est laborum. 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt ~ 


Some text below the overflow container 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
mollit anim id est laborum. 
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Markup 
«div class-'"uk-modal-dialog"» 
<p>.. .</p> 
«div class="uk-overflow-container">...</div> 
<p>.. .</p> 
</div> 


对 话 框 


模 态 对 话 框 组 件 还 提供 了 原生 对 话 框 的 选择 : window.alert, window.confirm fe 
window.prompt. 


Example 


Attention! 


UIkit.modal.alert("Attention!"); 


Are you sure? 





UIkit.modal.confirm("Are you sure?", function()( 
// 点 击 OK 确认 后 开始 执行 


3); 
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UIkit.modal.prompt("Name:", value, function(newvalue)( 
// 点 击 0K 提 交 后 执行 


3); 


Wait 5 sec.. 





var modal = UIkit.modal.blockUI("Any content..."); // 使 用 modal.hi 
BA a 5 





JavaScript 
你 可 以 通过 原生 的 Javascript 处 理 模 态 对 话 框 。 


Example 


var modal = UIkit.modal(".modalSelector"); 


if ( modal.isActive() ) { 
modal.hide(); 

) else { 
modal.show(); 

} 


每 当 模 态 对 话 框 被 打开 时 会 触发 一 次 show.uk.modal 事件 ， 每 当 被 关闭 时 会 触 
发 一 次 hide.uk.modal 事件 。 


Example 


$('.modalSelector').on(( 


'show.uk.modal': function()( 
console.log("Modal is visible."); 


}, 


'hide.uk.modal': function(){ 
console.log("Element is not visible."); 


} 
19r 
事件 
名 称 参数 描述 
show.uk.modal event 模 态 对 话 框 显示 时 


hide.uk.modal event 模 态 对 话 框 隐藏 时 。 


抽 层 /Off-canvas 
创建 一 个 可 以 在 页 面 上 平滑 地 滑 入 滑 出 的 抽 层 。 


抽 层 完美 适用 于 构建 移动 端 导 航 ， 与 那些 颇 受 欢迎 的 许多 原生 手机 应 用 类 似 ， 在 其 
左上 和 角 用 一 个 按钮 来 开关 带 有 菜单 的 侧 边栏 。 


用 法 


抽 层 组 件 由 一 个 遮 草 层 和 一 个 弹出 边栏 组 成 。 


Class 描述 
添加 该 类 至 一 个 &lt;div&gt; 元 素来 创建 隐藏 在 页 
.Uk-offcanvas 面 外 的 边栏 容器 和 堆 盖 层 。id 也 需要 添加 ， 使 抽 屋 可 


被 打开 或 关闭 。 


E e icd 添加 该 类 至 一 个 子 级 &lt;div&gt; 元 素来 创建 抽 
屋 式 边栏 。 
你 可 以 使 用 任何 元 素来 切换 抽 屋 式 侧 边 栏 。 &lt;a&gt; 元 素 需 要 链接 至 抽 层 容器 
的 id。 为 了 使 必要 的 JavaScript 生 效 ， 仅 需 添加 data-uk-offcanvas 属性 即 可 。 
如 果 你 使 用 了 其 他 元 素 ， 比 如 按钮 ， 仅 需 添加 

data-uk-offcanvas-"[target: 4ID')" 属性 指向 抽 层 容器 的 id 。 


示例 


consectetur 





Code 


«1-- 这 是 开关 抽 层 式 边栏 的 锚 --> 
«a hrefz'"zZmy-id" data-uk-offcanvas»...«/a» 


«1-- 这 是 开关 抽 层 式 边 栏 的 按钮 - -> 
«button class-"uk-button" data-uk-offcanvasz'[target: 'Zmy-id')'».. 


«1-- 抽 层 式 边 栏 --> 
«div id-"my-id" class="uk-offcanvas"> 

«div class-"uk-offcanvas-bar'»...«/div» 
«/div» 








翻转 修 4 
添加 .uk-offcanvas-bar-flip 类 至 抽 屋 式 边栏 ， 使 之 从 右 侧 滑 出 。 


示例 


consectetur 





Code 


«div id-"my-id" class-"uk-offcanvas"» 
«div class-"uk-offcanvas-bar uk-offcanvas-bar-flip"»...«/div» 
«/div» 


到 ES] wj 











抽 层 式 导 航 


抽 屋 式 侧 边栏 可 以 包含 导航 栏 。 添 加 .uk-nav-offcanvas 类 来 根据 抽 层 的 上 下 文 
定义 导航 菜单 的 样式 。 


示例 


Item 
Active 
Parent 
Parent 


Item 


* Parent 


WW item 


A Item 





Code 


«1-- 这 是 用 来 触发 抽 屋 式 边 栏 的 按钮 --> 
«button class="uk-button" data-uk-offcanvas="{target: '#my-id'}">.. 


<1-- 抽 层 式 边 栏 --> 
«div id-"my-id" class="uk-offcanvas"> 
«div class-"uk-offcanvas-bar'» 


«ul class-"uk-nav uk-nav-offcanvas" data-uk-nav»...«/ul» 
«/div» 


«/div» 





抽 层 式 面板 


你 可 以 在 抽 层 式 边 栏 的 内 部 放置 任何 自 定义 内 容 。 仅 需 将 其 包 庄 在 带 
有 .uk-panel 类 的 &lt;div&gt; 元素 中 即 可 。 


示例 


Panel title 


consectetur 


Panel title 





Code 


«1-- 这 是 用 来 触发 抽 屋 式 边 栏 的 按钮 --> 
«button class="uk-button" data-uk-offcanvas="{target: '#my-id'}">.. 


<1-- 这 是 抽 层 式 边 栏 --> 
«div id-"my-id" class="uk-offcanvas"> 
«div class-"uk-offcanvas-bar'» 
«div class-"uk-panel'"»...«/div» 
«/div» 
«/div» 








JavaScript 
可 以 通过 JavaScript 来 打开 或 关闭 抽 层 : 


// 通过 CSS 选 择 器 匹配 抽 层 显示 状态 
$.UIkit.offcanvas.show('Zmy-id'); 


// 隐藏 当前 所 有 抽 层 。 如 果 你 不 需要 任何 动画 效果 ， 设 置 为 true。 
$.UIkit.offcanvas.hide([force = false]) 


事件 


事件 名 称 参数 描述 
show.uk.offcanvas event, panel, bar 抽 屋 显示 时 触发 


hide.uk.offcanvas event, panel, bar 抽 层 隐藏 时 触发 


174& Z5 [Switcher 


通过 不 同 的 内 容 窗 格 进行 动态 变换 。 


用 法 


切换 器 组 件 由 若干 拨 动 器 和 与 它们 相关 联 的 内 容 项 目 组 成 。 添 加 
data-uk-switcher-2"(connect:'4ID')" 到 包含 拨 动 器 的 元 素 ， 将 此 属性 内 的 
ID 指向 具有 相同 ID 的 包含 内 容 项 目 的 元 素 ， 添加 .uk-switcher 类 到 同一 个 元 素 

中 。 通 常 ， 切 换 器 和 其 他 组 件 搭配 使 用 ， 这 里 将 展示 其 中 一 部 分 


示例 
Code 
<1-- 这 是 包含 拨 动 元 素 的 容器 --> 


«ul data-uk-switcherz"(connect:'Zmy-id'j"» 
<li><a href="">. ..</a></li> 
</ul> 


«1-- 这 是 内 容 项 目的 容器 --> 
«ul id-"my-id" class-z"uk-switcher"- 


«li»...«/li» 
«/ul» 


在 内 容 中 切换 条 目 /Switch items from within content 


在 某 些 情况 下 ， 你 想 要 从 显示 的 内 容 中 操作 切换 到 另 一 个 内 容 节点 。 添 加 
data-uk-switcher-item 属性 使 之 成 为 可 能 。 为 了 指向 目 m ， 你 必须 将 
data 属性 设 及 置 为 相应 的 标号 o 


Example 


Gus item Hello! 切换 到 下 一 内 奉节 点 


Item 


Markup 


«1-- 这 是 包含 拨 动 元 素 的 导航 --> 
«ul data-uk-switcherz"(connect:'Zmy-id'j"» 
<li><a href="">. ..</a></li> 


</ul> 
<!-- 这 是 内 容 条 目的 容器 --> 
«ul id="my- id" class-z"uk-switcher"- 
«li» ... «a hrefz"" data-uk-switcher-itemz"9Q"»,..«/a»«/li» 
«li» ... «a hrefz"" data-uk-switcher-itemz"1"»...«/a»«/li» 
«/ul» 


将 data 属性 设置 为 next 和 previous 将 会 切换 到 相 邻 的 条 


Markup 
«li» ... «a hrefz"" data-uk-switcher-item-z"next"»...«/a»«/li» 
«li» ... «a hrefz"" data-uk-switcher-item-"previous'»...«/a»«/li» 


e —————————————————— I: [ 


关联 多 个 项 目 


切换 器 也 可 以 管理 多 个 内 容 容器 。 只 需要 在 conect 参数 中 填 入 需要 关联 的 容器 
的 ID， 用 过 号 隔 开 。 


示例 


Container 1 Container 2 


Item 1 P 
Hello from container 1! Hello from container 2! 


Item 


Code 


<1-- 这 是 包含 拨 动 元 素 的 导航 菜单 --> 

«ul data-uk-switcherz"[connect:'4Zmy-id-one, Zmy-id-two'j"» 
<li><a href="">. ..</a></li> 

</ul> 


<1-- 这 些 是 包含 着 内 容 项 目的 容器 们 --> 

«ul id-"my-id-one" class="Uk-switcher"> 
eye 

</ul> 


<ul id="my-id-two" class="uk-switcher"> 
Sa a a SAAR 
</ul> 


动画 


切换 器 组 件 允许 你 为 它 添加 各 式 的 切换 动画 。 你 所 需要 做 的 就 是 添加 animation 
参数 到 data 属 性 中 ， 然 后 设置 你 希望 使 用 的 动画 。 查 阅 下 面 的 列表 ， 了 解 我 们 提供 
的 动画 吧 。 


Class 描述 
fade 元 素 淡 入 
scale 元 素 由 小 变 大 
slide-top 元 素 从 顶部 滑 入 
slide-bottom 元 素 从 底部 滑 入 
slide-left 元 素 从 左边 滑 
slide-right 元 素 从 右边 滑 入 
slide-horizontal 内 容 项 目 水 平方 向 滑动 ， 方 向 基于 元 素 相 邻 关系 。 
slide-vertical 内 容 项 目 重 直 方向 滑动 ， 方 向 基于 元 素 相 邻 关系 。 


示例 
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Fade Scale Slide top 

ltem Item Item 

Hello! Hello! Hello! 

Slide left Slide right Slide horizontal 
Item Item Item 

Hello! Hello! Hello! 

<1-- 包含 拨 动 元 素 的 容器 --> 


«ul data-uk-switcher="{connect:'#my-id', animation: 
<li><a hrefz'""»...«/a»«/li» 
</ul> 


<1-- 包含 内 容 项 目的 容器 --> 

«ul id-"my-id" class="uk-switcher"> 
<li>...</li> 

</ul> 


自 定 义 动 画 


Slide bottom 
Item 

Hello! 

Slide vertical 
Item 

Hello! 

'fade'}"> 


你 同样 可 以 使 用 动画 组 件 中 的 uk-animation-* 类 来 应 用 多 个 动画 。 通 过 这 种 
方式 你 甚至 可 以 创建 你 的 自 定 义 类 来 为 切换 器 应 用 不 同 的 动画 效果 。 


IE Tab Tab 


Hellol 


Code 


切换 器 /Switcher 


216 


<1-- 包含 拨 动 元 素 的 容器 --> 

«ul data-uk-switcherz"(connect:'Zmy-id', animation: 'uk-animation-! 
<li><a href="">. ..</a></li> 

</ul> 


«!-- 包含 内 容 项 目的 容器 --> 

«ul id-"my-id" class="uk-switcher"> 
«li»...«/li» 

«/ul» 








切换 器 与 二 级 导航 


轻松 地 将 切换 器 应 用 于 二 级 导航 组 件 T. 


示例 
Item Item 
Hello! 
Code 
«1-- 这 是 包含 拨 动 元 素 的 二 级 导航 --> 


«ul class-"uk-subnav uk-subnav-pill" data-uk-switcher-z"[(connect:'Zzr 
<li><a href="">. ..</a></li> 
</ul> 


«!-- 包含 内 容 项 目的 容器 --> 

«ul id-"my-id" class="uk-switcher"> 
sq 

</ul> 


到 ai 





切换 器 与 选项 卡 


作为 一 个 特例 ， 添 加 data-uk-tab-"(connect: 4ID')" 属性 ， 使 用 “tab” 参 数 蔡 
代 “switcher”， 使 得 切换 器 和 选项 卡 组 件 相互 结合 。 


Hello! 


Code 


«1-- 这 是 包含 拨 动 元 素 的 选项 卡 式 导航 --> 

«ul class="uk-tab" data-uk-tab="{connect:'#my-id'}"> 
<li><a href="">., ..</a></li> 

</ul> 


<1-- 包含 内 容 项 目的 容器 --> 

«ul id-"my-id" class-"uk-switcher uk-margin"> 
sue lu 

</ul> 


注意 当 使 用 选项 卡 组 件 的 .uk-tab-bottom 类 的 时 候 ， 寻 航 和 内 容 需 要 按 相反 的 


顺序 放置 ， 这 样 内 容 才 会 显示 在 选项 卡 的 上 方 。 


重 直 选项 卡 
使 用 网 格 组 件 正 确 地 显示 带 有 垂直 排列 的 选项 卡 导 航 的 内 容 。 


示例 
Hello! ello! 
Tab Hello! Hello Tab 
Tab Tab 
Tab Tab 


Code 


«1-- 位 于 左边 的 选项 卡 式 导航 --> 
«div class="uk-grid"> 
«div class="uk-width-medium-1-2"> 
<1-- 包含 拨 动 元 素 的 垂直 选项 卡 式 导航 --> 
«ul class-'"uk-tab uk-tab-left" data-uk-tabz"[connect: 'Zmy-: 


«/div» 
«div class-"uk-width-medium-1-2"» 
<1-- 包含 内 容 项 目的 容器 --> 
«ul id-"my-id" class="uk-switcher">...</ul> 
«/div» 
«/div» 


<1-- 位 于 右边 的 选项 卡 式 导航 --> 
«div class="uk-grid"> 
«div class="uk-width-medium-1-2 uk-push-1-2"> 
<1-- 包含 拨 动 元 素 的 重 直 选项 卡 式 导航 --> 
«ul class-"'"uk-tab Uk-tab-right”data-uk-tab="{connect : '#my- 


«/div» 
«div class-z"uk-width-medium-1-2 uk-pull-1-2'» 
<1-- 包含 内 容 项 目的 容器 --> 
«ul id="my-id" class="uk-switcher">...</ul> 
</div> 
</div> 


[renun € 





104& 2 5j dcn 


切换 器 同样 可 以 应 用 于 按钮 或 按钮 组 P o R 


只 需要 添加 切换 器 data 属 性 到 包含 了 一 
组 按钮 的 &lt;div&gt; APRA ISP 


需 
带 有 .button-group 类 的 元 素 。 


示例 


Link Button Button Link Button Button 


Hello! Hello! 


Code 


<1-- 包含 拨 动 按钮 的 容器 -- 
«div data-uk-switcherz"(connect:'Zmy-id')"» 

«button class-"uk-button" typez'"button'»...«/button» 
«/div» 


<1-- 包含 内 容 项 目的 容器 --> 

«ul id-"my-id" class-"uk-switcher uk-margin'"»...«/ul» 

<1-- 包含 拨 动 按钮 的 按钮 租 --> 

«div class-"uk-button-group" data-uk-Sswitcher="{connect : '#my-id'}": 
«button class-"uk-button" type="button">...</button> 

«/div» 


<1-- 包含 内 容 项 目的 容器 --> 
«ul id-"my-id" class="uk-switcher uk-margin">...</ul> 


-= -LA 


切换 器 与 导航 菜 。 


若 需 将 切换 器 应 用 于 导航 菜单 组 件 ， 添 加 data 属 性 到 导航 菜单 的 &lt;ul&gt; 元 
素 中 。 使 用 网 格 组 件 将 导航 菜单 和 内 容 项 放置 在 同一 个 网 格 布局 中 。 


示例 


Item 


Item 


Code 


«div class-"uk-grid"» 
«div class-"uk-width-medium-1-4"» 


<1-- 包含 拨 动 元 素 的 导航 菜单 --> 
«ul class="uk-nav uk-nav-side" data-uk-switcher="{connect: 
<li><a hrefz"'"»...«/a»«/li» 
«/ul» 
«/div» 
«div class-"uk-width-medium-3-4"» 


<1-- 包含 内 容 项 目的 容器 --> 
«ul id-"my-id" class="uk-switcher"> 
<li>...</li> 
</ul> 
</div> 
</div> 


本 -一 





JavaScript 选项 
这 是 一 个 关于 如 何 通过 属性 设置 选项 的 例子 : 


data-uk-switcher-z"[active:1)" 


94 
选项 可 能 的 值 E 描述 
EL 
connect CSS fase ， 被 关联 的 条 目 容 器 
selector 
st CSS Von WA CSSE ES ， 通 过 点 击 触发 内 容 的 
selector 切换 行为 。 
UA do X cRdbAy re 
eNA integer 0 初始 化 时 呈 激 活 状 态 的 内 容 项 目 索引 
值 
animation mixed false ”预定 义 的 动画 名 称 或 Uikit 动 画 的 类 名 。 
swiping boolean true 启用 或 禁用 通过 滑动 改变 内 容 


事件 
你 可 以 为 以 下 事件 绑 定 回调 函数 ， 用 于 自 定义 功能 : 


事件 名 称 参数 描述 


show.uk.switcher event, active item ”切换 器 条 目 显示 或 改变 时 触发 


Example 


$('[data-uk-switcher]').on('show.uk.switcher', function(event, are: 
console.log("Switcher switched to ", area); 


3); 


| 











4& 7 [toggle 

使 用 一 个 拨 动 器 来 隐藏 ， 切 换 ， 或 者 改变 各 种 内 容 的 外 观 。 

用 法 

要 使 用 这 个 组 件 ， 只 需要 添加 data-uk-toggle-"[target: 4ID)" 属性 到 一 个 


&lt;button&gt; 或 &lt;a&gt; 元 素 中 。 你 可 以 在 任意 选择 器 中 使 用 这 个 拨 动 
属性 。 


拨 动 器 会 在 页 面 的 某 元 素 中 添加 或 者 删除 一 个 class 类 。 默 认 情 况 下 ， 它 会 添加 
.uk-hidden 类 来 隐藏 这 个 元 素 。 


示例 


Toggle 


Tu? 
Code 


«button class-"uk-button" data-uk-toggle-"[target: '#my-id'}">...</! 


«div id-z"my-id"»...«/div» 





jh e ^E 
你 也 可 以 同时 拨 动 多 个 元 素 。 使 用 适当 的 选择 器 就 行 。 


示例 


Toggle 


Bazinga! 


注意 在 这 个 例子 中 ， 我 们 为 其 中 一 个 元 素 添 加 了  .uk-hidden 类 ， 所 以 只 有 另 一 
个 元 素 会 显示 出 来 。 拨 动 器 会 在 两 个 元 素 之 间 切 换 可 见 状态 。 


Code 


«button class-"uk-button" data-uk-toggle="{target:'.my-class'}">.. 


«div class-"my-class"»...«/div» 
«div class-"my-class uk-hidden"»...«/div» 





É X 3 class 
如 果 你 不 想 切 换 .uk-hidden 类 ， 你 也 可 以 添加 你 的 自 定义 类 。 
示例 

Toggle 


What's up? 


注意 在 这 个 例子 中 我 们 使 用 了 .uk-panel-box-primary 类 来 切换 不 同 的 面板 样 
Rs 


Code 


«button class-"uk-button" data-uk-toggle-"[target:'Zmy-id', cls:'ul 


«div id-"my-id" class-"uk-panel uk-panel-box'»...«/div» 





拨 动 器 组 件 允 许 你 为 元 素 添加 拨 动 的 动画 效果 。 只 需要 添加 一 个 动画 组 件 中 的 
.Uk-animation-* 类 到 animation 参数 中 。 元 素 出 现 和 消失 都 使 用 这 个 类 。 
如 果 你 喜欢 不 同 的 动画 ， 只 需 添 加 另 一 个 动画 类 就 行 了 。 


示例 
Toggle 


It's magic! 


Code 


«button class-"uk-button" data-uk-toggle-"[target:'Zmy-id', animat: 


«div id-z"my-id"»...«/div» 


国王 





JavaScript 选项 
这 是 一 个 例子 ， 关 于 如 何 通 过 属性 来 设置 选项 : 


data-uk-toggle="{target: 'Zmy-id')" 


选项 可 能 的 值 默认 值 描述 
target CSS selector false 被 拨 动 的 是 哪个 元 素 
es string 'uk-hidden' 拨 动 的 class 类 


animation mixed false 任意 Uikit 的 动画 类 名 


滚动 监听 /Scrollspy 

在 滚动 页 面 时 ， 触 发 一 些 事 件 及 动画 。 

用 法 

滚动 监听 组 件 监 听 页 面 滚动 ， 并 触发 基于 滚动 位 置 的 事件 。 例 如 ， 当 你 向 下 滚动 页 


面 时 ， 你 可 以 使 首次 出 现在 视窗 中 的 一 个 元 素 触 发 一 个 平滑 淡 入 的 动画 。 只 需 添加 
带 有 以 下 选项 的 data-uk-scrollspy 属性 。 


Data 属性 描述 
cls:'MY-CLASS' 只 有 元 素 首 次 出 现在 视窗 时 才 应 用 这 个 属性 中 的 class。 
repeat: true 元 素 每 次 出 现在 视窗 中 时 ， 都 应 用 这 个 类 。 
delay:600 添加 以 毫秒 为 单位 的 动画 延迟 。 


通常 ， 动 画 组 件 中 的 类 与 滚动 监视 一 起 搭配 使 用 。 


示例 
下 面 的 例 字 使 用 了 repeat: true 选项 。 向 上 或 向 下 滚动 可 以 看 到 被 触发 的 动画 
效果 。 


Fade 


Lorem ipsum dolor sit 
amet, consectetur 
adipisicing elit 


Scale up 


Lorem ipsum dolor sit 
amet, consectetur 
adipisicing elit 


Scale down 
Lorem ipsum dolor sit 


amet, consectetur 
adipisicing elit 


Slide top 


Lorem ipsum dolor sit 
amet, consectetur 
adipisicing elit 


Slide bottom 


Lorem ipsum dolor sit 
amet, consectetur 
adipisicing elit 


Markup 


«div data-uk-scrollspy-z"([cls:'uk-animation-fade')"»...«/div» 


«div data-uk-scrollspy-z"([cls:'uk-animation-fade', repeat: truej'"».. 


«div data-uk-scrollspy-"([cls:'uk-animation-fade', delay:900}">...<, 





你 还 可 以 将 多 个 需要 添加 滚动 监听 效果 的 元 素 编 成 一 组 ， 这 样 就 不 必 分 别 为 每 个 元 
素 添加 data 属性 了 。 只 需要 添加 data-uk-scollspy"[target: 'MY-CLASS' )" 
属性 到 容器 元 素 ， 将 target 选项 指向 容器 中 你 想 要 添加 动画 效果 的 条 目 。 当 使 用 
delay( 延 时 ) 时 ， 将 会 为 进入 视野 的 一 行 条 目 添加 逐次 显现 的 效果 。 这 个 延 时 效果 会 
为 同一 组 内 的 下 一 行 元 素 滚 动 进入 视野 时 重 置 。 








Item Item Item Item 

Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem qm ! dolor sit 
amet ectetur amet, consectetur amet, consectetur CO 

adipisicing elit adipisicing elit adipisicing elit adipisicing elit 

Item Item Item Item 

Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit 
amet amet, consectetur D se 
adipisicing elit adipisicing elit adipisicing elit adipisicing elit 


Example 


«div data-uk-scrollspy-z"([cls:'uk-animation-fade', target:'.my-clas: 


<1-- 无 延 时 --> 
«div class-"my-class"»...«/div» 


«!-- 300ms XH --» 
«div class-"my-class"»...«/div» 


«!-- 600ms 延 时 --» 
«div class-"my-class"»...«/div» 


«/div» 


于 





JavaScript 选 项 
这 是 一 个 如 何 通过 属性 设置 选项 的 示例 : 


data-uk-scrollspy-z"(cls:'uk-animation-fade')" 


选项 ri 默认 值 描述 
jä 


'uk-scrollspy- ” 当 元 素 出 现在 视 口 内 时 添加 的 


1 i " 
cls string VIEN X o 
'uk- 5 当 元 首次 出 现在 视 时 添 
ee Se Uk scrollspy 当 元 素 首 次 出 现在 视 口 内 时 添加 
init-inview 的 类 。 
aw i 前 的 顶部 偏 移 
topoffset integer 0 人 
an 1 3] 453 E 384g d 
leftoffset integer 0 o T REOR IC TIERS] 28 904845 
元 素 是 否 每 次 出 现在 视 口 中 都 应 
repeat boolean false 用 cls 中 提 到 的 类 。 
delay integer 0 VA d b 7] 3E ER SERE e 
事件 
你 可 以 为 以 下 事件 绑 定 回调 函数 ， 以 实现 自 定 义 功能 : 

名 称 描述 
uk.scrollspy.init 当 元 素 开始 进入 视 口 时 触发 。 
uk.scrollspy.inview 当 元 素 在 视 口中 时 触发 。 
uk.scrollspy.outview 当 元 素 离 开 视 口 时 触发 。 


示例 


$('[data-uk-scrollspy]').on('uk.scrollspy.inview', function()([ 
// custom code... 


3); 


R 5! 3 "T Au Scrollspy Nav 


根据 你 网 站 滚动 条 的 位 置 来 自动 更 新 所 对 应 的 导航 状态 ， 只 需 添加 Data 属 性 
data-uk-scrollspy-nav 到 任意 导航 栏 中 。 每 个 菜单 项 必须 链接 至 网 站 中 网 站 
中 对 应 的 具有 相同 |D 的 部 分 。 


Data% t+ 


data-uk-scrollspy-nav 


data-uk-scrollspy-nav="{closest:'MY-SELECTOR'}" 


data-uk-scrollspy-nav="{smoothscroll:true}" 


data-uk-scrollspy-navz"(cls:'MY-CLASS')" 


对 于 滚动 监听 的 例子 ， 可 以 查看 滚动 监听 测试 页 面 。 


Code 


«ul class="uk-nav uk-nav-side" data-uk-scrollspy-navz'[(closest: 


<li><a href="#MY-ID">...</a></1i> 
<li><a hrefz'4MY-ID2"»...«/a»«/li» 
«/ul» 


«div idz"MY-ID"»...«/div» 
«div idz"MY-ID2"»...«/div» 


n 一 一 


JavaScript 选 项 


这 是 一 个 如 何 通 过 属性 设置 选项 的 示例 : 


data-uk-scrollspy-nav="{smoothscroll:true}" 


描述 


触发 滚动 监听 导 
航 的 功能 必须 的 
JavaScript ° 


通过 遍历 查找 此 
DOM 树 中 最 接 
近 的 节点 元 素 进 
行 匹 配 。 


在 网 页 的 不 同 部 
分 之 间 跳 转 时 ， 
应 用 平滑 滚动 组 
件 。 


默认 地 ， 滚 动 监 
听 导 航 会 拨 动 
uk-active 
Je os Els 
选项 使 用 你 自己 
的 类 名 。 





Ex: 


选项 

xb 7j) 值 

cls string 
CSS 选 

closest ERE 
topoffset integer 
leftoffset integer 


smoothscroll boolean 


事件 


名 称 
init.uk.scrollspy 
inview.uk.scrollspy 


outview.uk.scrollspy 


默认 
值 


'uk- 
active 


false 


0 
0 


false 


描述 


添加 其 中 的 class 以 激活 元 素 。 


将 上 面 所 述 的 类 ， 应 用 到 本 选择 
应 的 元 素 中 。 


滚动 的 顶部 偏 移 量 。 


i 


滚动 的 左 部 偏 移 量 。 


显示 平滑 的 滚动 动画 效果 o 


描述 
深 动 监听 第 一 次 初始 化 时 触发 
元 素 进 入 视 口 后 触发 
元 素 离开 视 口 后 触发 


用 一 个 漂亮 的 绥 慢 滚动 效果 来 增强 网 站 页 面 内 各 部 分 之 间 跳 转 时 的 效果 。 


用 法 

了 能 在 网 页 中 的 一 部 分 跳 转 到 另 一 部 分 时 ， 渐 渐 降 低 跳 转 的 速度 ， 例 如 ， 一 个 回 
到 顶部 的 按钮 ， 只 需要 添加 data-uk-smooth-scroll 属性 到 一 个 链接 到 目标 位 
置 的 &lt;a&gt; 元 素 中 即 可 。 


示例 
在 我 们 的 例子 中 ， 使 用 了 标题 的 ID 作为 平滑 滚动 的 目标 。 


Code 


«a hrefz'"Zmy-id" class-'"uk-button" data-uk-smooth-scroll»...«/a» 


偏 移 


在 精确 计算 滚动 位 置 时 ， 通 过 偏 移 选项 来 添加 相对 于 目标 的 指定 距离 。 偏 移 量 通过 
data 属 性 传递 。 它 的 数值 为 正 时 ， 在 到 达 目标 位 置 之 前 停止 滚动 ; 数值 为 负 时 ， 在 
超过 目标 位 置 后 停止 滚动 。 


Data 属性 描述 
添加 一 个 偏 移 量 ， 在 滚动 到 
data-uk-smooth-scroll-"(offset: 90)" 目标 还 有 90PX 的 位 置 停 下 
添加 一 个 偏 移 量 ， 在 滚动 到 
data-uk-smooth-scroll="{offset: -90)" 超过 目标 位 置 90PX 的 地 方 停 
下 来 。 


示例 


This link scrolls the site to the headline "Smooth scroll" with an offset of 98px 


This link scrolls the site to the headline "Smooth scroll" with an offset of -98px . 


Code 


«a hrefz'"Zmy-id" data-uk-smooth-scroll-"[offset: 90}">...</a> 


«a hrefz'"Zmy-id" data-uk-smooth-scroll-"[offset: -90}">...</a> 


附加 组 件 


来 源 : 附加 组 件 
各 种 有 用 的 独立 附加 组 件 ， 它 们 并 不 包含 在 UIKit 的 核心 框架 中 。 


UIKit 提供 了 一 些 高 级 的 组 件 ， 它 们 不 包含 在 UIKit 的 核心 框架 中 。 通 常 你 在 普通 的 
网 站 上 不 会 用 到 这 些 插件 。 如 果 你 创建 高 级 的 用 户 界面 管理 等 领域 ， 它们 便 会 派 上 
用 场 ， 比 如 “ 拖 放 排序 "和 "日 期 选择 器 ”。 


用 法 


当 你 后 ， 你 可 以 在 /css 和 /js 文件 夹 里 的 /components 中 发 现 附加 组 件 
的 相关 文件 : 


/css 
/components 
<1-- 组 件 的 基本 样式 --> 
autocomplete.css 
autocomplete.min.css 


«1-- 组 件 具 有 渐变 风格 的 样式 --> 
autocomplete.gradient.css 
autocomplete.gradient.min.css 


<!-- 组 件 具 有 扁平 化 风格 的 样式 --> 
autocomplete.almost-flat.css 
autocomplete.almost-flat.min.css 


/js 
/ components 
«1-- 组 件 的 JavaScript 和 压缩 后 的 版 本 --> 
autocomplete.js 
autocomplete.min.js 


注意 若 要 使 用 这 些 附 加 组 件 ， 你 必须 在 文档 头 部 添加 它 的 JavaScript 和 CSS 文 件 。 


Example 


<!DOCTYPE html» 


«html» 
«head» 
«title»«/title» 
«link rel="stylesheet" href-z'"uikit.min.css" /> 
«script srcz"jquery.js"»«/script» 
«script src-"uikit.min.js'"»«/script» 
«!-- Autocomplete CSS --> 
«link rel="stylesheet" hrefz'"components/autocomplete.css'» 
«!-- Autocomplete Javascript --» 
«script src-"components/autocomplete.js"»«/script» 
</head> 
<body> 
</body> 
</html> 


gp HB 


Tests 


Ulkit 为 每 一 个 组 件 提供 了 测试 文件 。 每 个 测试 页 面包 含 其 组 件 的 测试 案例 和 开 箱 即 
用 的 所 有 可 能 性 。 


在 ZIP 压 缩 包 里 你 可 以 找到 Ulkit 为 你 的 项 目 提 供 的 所 有 CSS，JavaScript 和 字体 文 
件 。 为 了 保持 Ulkit 的 核心 框架 的 简洁 ， 核 心 框架 中 几乎 不 包含 任何 样式 。 因 此 我 们 
提供 两 套 额 外 的 样式 包括 渐变 风格 和 扁平 风格 。 每 一 种 样式 都 包含 一 个 单独 的 
CSS 文 件 和 一 个 压缩 版 的 CSS 文 件 。 一 些 并 不 包含 在 核心 框架 中 的 附加 组 件 也 提供 
了 额外 的 两 套 CSS 文 件 ， 它 们 可 以 被 单独 的 引入 到 你 的 项 目 中 使 用 。 


前 往 测 试 





布局 类 组 件 


动态 网 格 
创建 可 排序 、 可 过 滤 的 多 列 动态 网 格 布局 。 


动态 网 格 组 件 允 许 你 利用 网 格 组 件 创 建 一 个 动态 的 响应 式 网 格 布局 。 在 任何 尺寸 的 
设备 中 ， 网 格 单元 都 将 自动 地 、 流 动 地 、 无 缝 地 调整 自身 构建 无 颖 的 多 列 布局 。 


用 法 


使 用 这 个 组 件 ， 添 加 data-uk-grid 属性 到 容器 元 素 。 用 网 格 组 件 中 的 
uk-width-* 或 .uk-grid-width-* 类 来 设置 网 格 单元 的 宽度 。 注 意 使 用 此 组 
件 需 要 额外 添加 grid.js 文件 ， 在 js/components 文件 夹 中 。 


Example 


6 


Markup 


Jl 


«1-- 这 是 使 用 在 每 个 网 格 单元 上 使 用 uk-width-* 的 网 格 --» 
«div data-uk-grid» 
«div class-"uk-width-small-1-2 uk-width-medium-1-4"»...«/div» 
«div class-"uk-width-small-1-2 uk-width-medium-1-4"»...«/div» 
«/div» 


<!-- 这 是 使 用 在 网 格 自身 使 用 uk-grid-width-* 的 网 格 --» 

«div class-"uk-grid-width-small-1-2 uk-grid-width-medium-1-4" data: 
<div>. ..</div> 
<div>. ..</div> 

</div> 








网 格 排水 沟 /Grid Gutter 


用 


排水 沟 将 网 格 单元 分 开 ， 在 data 属 性 中 使 用 (gutter: 20) 选项 即 可 。 此 时 ， 


排水 沟 会 是 20px 宽 。 


E 


xample 


Markup 


«div data-uk-grid-"[gutter: 20j'"»...«/div» 


` 


i JE 


你 还 可 以 过 滤 网 格 ， 使 其 只 在 页 面 中 显示 特定 的 网 格 单元 。You can also filter your 
grid so that only particular items will be displayed. 为 此 ， 添 加 

(controls: '#my-id'} 选项 到 data 属 性 指向 过 滤器 的 id。 每 个 过 滤 控 制 器 都 必 
MA data-uk-filter 属性 来 定义 你 想 要 的 过 滤 分 类 。 你 还 必须 为 每 个 网 格 单元 
添加 data-uk-filter 属性 以 明确 其 归属 于 哪个 分 类 。 使 用 过 号 分 隔 多 段 分 类 。 


Example 
All Filter A Filter B 
A 1 B2 A3 B4 
Markup 


这 个 例子 使 用 了 二 级 导航 来 过 滤 网 格 单元 。 


<!-- Filter Controls --» 
«ul id-"my-id" class="uk-subnav"> 
«li data-uk-filterz""»«a hrefz'""»«/a»«/li» 
«li data-uk-filter-"filter-a"»«a hrefz""»«/a»«/li» 
«li data-uk-filter-"filter-b'"»«a hrefz""»«/a»«/li» 
«/ul» 


«!-- Dynamic Grid --> 
«div data-uk-grid-"([controls: '#my-id'}"> 

«div data-uk-filter-"filter-a"»...«/div» 

«div data-uk-filter-"filter-b"»...«/div» 

«div data-uk-filter-z"filter-a,filter-b"»...«/div» 
«/div» 


排序 


升序 排列 网 格 单元 ， 添 加 (controls: '#my-id'} 选项 到 data 属 性 指向 排序 控件 
的 id ° 

每 个 控件 需要 带 有 data-uk-sort 属性 以 及 一 个 自 定 义 值 以 指明 你 想 要 进行 排序 
的 种 类 ， 比 如 data-uk-sort="my-category" 。 同 样 ， 你 需要 添加 带 有 指定 分 类 

名 称 的 data 属 性 到 每 个 网 格 单元 中 。 自 定 义 的 值 包 含 应 该 被 排序 的 数据 ， 比 如 
data-my-category="my-data"”“。 

网 格 单元 默认 按 升序 排序 。 要 实现 降序 ， 只 需 添 加 :desc 到 排序 控件 的 data 属 性 
值 中 ， 比 如 data-uk-sort-"my-category:desc" œ 


Example 


Ascending Descending 


Markup 


«ul id-"my-id" class-"uk-subnav'-» 

«li data-uk-sort-"my-category"»«a hrefz'"»2«/a»«/li» 

«li data-uk-sort-'"my-category:desc"»«a hrefz'""»«/a»«/li» 
</ul> 


<div data-uk-grid="{controls: '#my-id'}"> 
<div data-my-category-"a"»...«/div» 


«div data-my-category-z"b"»...«/div» 
«/div» 


多 个 类 别 


要 使 用 多 个 类 别 来 进行 网 格 单元 的 排序 ， 为 每 个 类 别 使 用 不 同 的 名 字 就 行 了 。 


D 
g 


m 


H4 


Markup 


«ul id="my-id" class="uk-subnav"> 
<li data-uk-sort="my-category"><a href=""></a></li> 
<li data-uk-sort="my-category:desc"><a href=""></a></li> 
<li data-uk-sort="my-category2"><a href=""></a></li> 
<li data-uk-sort="my-category2:desc"><a href=""></a></li> 
</ul> 


<div data-uk-grid="{controls: '#my-id'}"> 
<div data-my-category="a" data-my-category2="8">...</div> 
«div data-my-category="b" data-my-category2="7">...</div> 
</div> 


JavaScript 选项 


选项 可 用 值 ”默认 值 描述 


colwidth integer ^ auto 列 宽 
animation boolean true 是 否 开局 列 刷新 的 动画 
duration integer © 200 动画 持续 时 间 
gutter integer — O0 列 与 列 之 间 的 排水 沟 
controls string false 联结 过 滤器 或 排序 控件 的 CSS 选择 器 
milten string i 单元 过 滤器 
手动 初始 化 


var grid = UIkit.grid(element, { /* options */ }); 


Events 
名 称 参数 描述 
beforeupdate.uk.grid event, children 网 格 刷 新 前 触发 
afterupdate.uk.grid event, children 网 格 刷新 后 触发 
Example 


用 jQuery 监听 beforeupdate 事 件 : 


$(function() { 
$('[data-uk-grid]').on('beforeupdate.uk.grid', function(e, chi: 
// your event-handling goes here 


3): 





视差 网 格 


创建 作用 于 单个 网 格 列 ， 使 之 具有 不 同 滚 动 速度 的 效果 。 
这 个 组 件 允 许 你 为 网 格 组 件 添加 滚动 视差 效果 。 


用 法 

注意 使 用 此 组 件 ， 必 须 引 入 grid-parallax.js ,你 可 以 在 js/components/ 
目录 中 找到 它 。 

使 用 这 个 组 件 ， 需 要 为 容器 元 素 添 加 data-uk-gridparallax 属性 。 使 用 网 格 组 
件 中 的 uk-width-* 3 .uk-grid-width-* 来 设置 网 格 条 目 单元 的 宽度 。 


Example 


Javascript 参数 


想 要 调整 滚动 速度 ， 只 需要 改变 data-uk-grid-parallax 属性 的 参数 即 可 ， 比 
如 :  data-uk-grid-parallax-"[translate:200]" 


JavaScript 选项 
通过 属性 来 设置 选项 的 例子 : 


data-uk-grid-parallax-"[translate:200)" 


选项 可 能 的 值 SUA à 描述 


translate integer 150 Translate 数值 
手动 初始 化 


var gp = UIkit.gridparallax(element, { /* options */ }); 


m 


AA APA 


创建 水 平 或 垂直 布局 的 圆 点 导航 ， 通 过 幻灯 片 或 者 滚动 的 方式 导航 到 页 面 的 不 同 部 


分 。 


用 法 


创建 带 有 圆 点 的 导航 ， 只 需要 添加 .uk-dotnav 类 到 &lt;ul&gt; 元 素 中 ， 再 
将 &lt;a&gt; 元 素 谋 套 进 列表 即 可 。 于 是 ， 完 美 地 创建 咯 一 个 典型 的 幻灯 片 导 
航 。 这 个 组 件 使 用 Flex 进 行 构建 ， 所 以 ， 你 可 以 使 用 Flex 调整 圆 点 导航 。 注 意 使 
用 此 组 件 需 要 额外 添加 dotnav.css 文件 ， 在 css/components 文件 夹 中 。 


Example 


Markup 


«ul class-"uk-dotnav"» 
«li class-"uk-active"»«a href="">, ..</a></li> 


<li><a hrefz""s...«/adass/I15 
«/ul» 


圆 点 导航 与 图 方 


为 了 能 在 图 片上 有 更 好 的 可 见 性 ， 上 比如 使 用 圆 点 导航 作为 幻灯 片 的 导航 时 ， 只 需要 


添加 .uk-dotnav-contrast X» 


Example 


Ulkit 中 文 文档 





注意 在 这 个 例子 中 ， 我 们 还 用 了 Flex 组 件 中 的 ,uk-flex-center 类 来 居中 国 点 
导航 。 


Markup 


«ul class="uk-dotnav uk-dotnav-contrast uk-flex-center'» 
«li class-"uk-active"»«a hrefz"'"»...«/a»«/li» 
«li»«a hrefz'"'"»...«/a»«/li» 

«/ul» 


垂直 的 圆 点 导航 


圆 点 导航 可 以 重 直 对 齐 。 只 需 添加 .uk-flex-column 类 即 可 。 这 对 于 使 用 滚动 
监听 进行 页 面 滚动 导航 是 非常 有 用 的 。 


Example 


点 导航 249 


Markup 


«ul class-"uk-dotnav uk-flex-column'"» 
«li class-"uk-active"'"»«a hrefz"'"»,...«/a»«/li» 
<li><a hrefz'""»,...«/a»«/li» 

«/ul» 


滑动 导航 /Slidenav 


创建 带 有 上 一 个 和 下 一 个 按钮 的 导航 ， 用 来 浏览 幻灯 片 。 


用 法 


创建 有 上 一 个 和 下 一 个 按钮 的 导航 ， 添 加 .uk-slidenav 类 到 &lt;a&gt; 元 
素 就 行 。 添 加 ,uk-slidenav-previous 或 ,uk-slidenav-next 类 来 定义 导 
航 条 目 作 为 上 一 个 和 下 一 个 按钮 9 注意 使 用 此 组 件 需要 额 外 添加 slidenav.css 
文件 ， 在 css/components 文件 夹 中 。 


Example 

Markup 
«a hrefz"" class-"uk-slidenav uk-slidenav-previous"»«/a» 
«a hrefz"" class-"uk-slidenav uk-slidenav-next"»«/a» 


滑动 导航 的 定位 


在 任意 内 容 上 面 定 位 滑动 导航 ， 上 比如 在 幻灯 片 或 者 图 片上 ， 只 需要 将 导航 有 内 容 包 
含 在 一 个 容器 元 素 中 ， 并 添加 .uk-slidenav-position 类 即 可 。 这 样子 ， 上 一 
个 和 下 一 个 按钮 将 会 分 别 被 重 直 居中 在 左边 和 右边 。 滑 动 导航 只 在 和 据 标 古人 和 停 在 内 容 
上 时 可 见 。 





Markup 


«div class-"uk-slidenav-position"» 


«img src="" alt=""> 

«a hrefz"" class-"uk-slidenav uk-slidenav-previous"></a> 

«a hrefz"" class-"uk-slidenav uk-slidenav-next"»«/a» 
«/div» 


滑动 导航 与 图 片 


为 了 在 图 片上 有 更 好 的 可 见 性 ， 比 如 使 用 滑动 导航 作为 幻灯 片 的 导航 时 ， 只 需 添 加 


.uk-slidenav-contrast 类 。 


Ulkit 中 文 文档 





Markup 
«a hrefz"" class-"uk-slidenav uk-slidenav-contrast uk-slidenav-pre 
«a hrefz"" class-"uk-slidenav uk-slidenav-contrast uk-slidenav-nexi 
E 





滑动 导航 /Slidenav 253 


利用 分 页 组 件 ， 创 建 基于 JavaScript 的 动态 分 页 。 
页 


分 页 组 件 将 根据 给 定 的 选项 自动 计算 页 面 。 这 非常 有 用 ， 例 如 在 Ajax 支持 的 列表 视 
图 中 ， 你 必须 触发 一 个 事件 来 动态 地 加 载 新 的 条 目 时 。 


用 法 


要 使 用 这 个 组 件 ， 只 需要 添加 data-uk-pagination 到 一 个 带 有 
.uk-pagination 类 名 的 &lt;ul&gt; 元 素 中 。 注 意 使 用 此 组 件 需要 额外 添加 
pagination.js 文件 ， 在 js/components 文件 夹 中 。 


Example 
1 48 | | 49 || 50 52 || 53 |54 100 


Markup 


«ul class-"uk-pagination" data-uk-pagination="{items:100, itemsOnP: 


[ER 





JavaScript 选项 


选项 可 用 值 | 认 描述 
值 
items integer 1 条 目的 总 数 ， 用 于 计算 页 面 。 
itemsOnPage integer 1 ”每 个 页 面 上 显示 的 条 目 数 。 
如 果 被 指定 了 值 , items and 
pages integer 0 ”itemsOnPage 将 不 会 用 于 计算 页 面 数 
He 


displayedPages integer 3 ”导航 时 有 多 少 页 码 是 可 见 的 。 
分 页 的 首页 或 未 页 有 多 少 页 Ec n 
edges integer | 3 — 的 首页 或 末 页 有 多 少 页 面 是 可 见 


currentPage integer 1 初始 化 后 ， 哪 一 页 应 该 被 立即 选中 。 


事件 


名 称 参数 描述 
event, pagelndex, pagination 页 面 点 击 


select.uk.pagination : 
us object 时 


每 当 你 点 击 某 个 页 面 时 ， 分 页 组 件 便 会 触发 uk-select-page 事件 。 


$('[data-uk-pagination]').on('select.uk.pagination', function(e, p: 
alert('You have selected page: ' + (pagelndex-*1)); 





手动 初始 化 


var pagination = UIkit.pagination(element, { /* options */ }); 


常用 组 件 


高 级 表单 


为 表单 中 的 单 选 按钮 和 复 选 框 添加 自 定 义 的 样式 。 


Ulkit 使 用 外 观 特性 只 使 用 CSS 进 行 样 式 的 定义 ， 而 非 采 用 自 定 义 标 记 。 目 前 ， 外 
观 特 性 只 被 webkit 浏 览 器 完整 支持 ， 所 以 这 些 样式 只 会 在 Chrome ` Safari 以 及 
Opera 浏 览 器 上 生效 。 一 旦 其 他 浏览 器 支持 这 个 特性 时 ， 这 个 现状 一 定 会 改变 的 。 


用 法 


你 可 以 使 用 这 个 组 件 来 扩展 表单 组 件 。 只 需要 讲 &lt;input&gt; 元 素 放 入 到 
&lt;form&gt; 元 素 中 并 添加 .uk-form 类 名 。 注 意 使 用 此 组 件 需 要 额外 添加 
form-advanced.css 文件 ， 在 css/components 文件 夹 中 。 


Example 


Markup 


«form class-"uk-form"» 
«input type-"radio"» 
«input type-"checkbox'» 

«/form» 


文件 表单 /Form file 


用 诸如 按钮 等 自 定 义 的 HTML 结 构 替 代 默 认 的 文件 域 表 单 。 


用 法 


若 要 应 用 此 组 件 ， 只 需 添加 .uk-form-file 类 到 一 个 包含 着 按钮 和 
&lt;input type="file"&gt; 元 素 的 容器 中 。 你 也 可 以 用 其 他 任意 元 
钮 。 注 意 使 用 此 组 件 需 要 额外 添加 form-file.css 文件 ， 

在 css/components 文件 来 中 。 


Example 


Select | 你 还 可 以 使 用 文本 


Markup 


«div class-"uk-form-file"» 
«button class-"uk-button"»...«/button» 
«input type="file"> 

«/div» 


«div class-"uk-form-file"»Text«input type="file"></div> 


素 替代 按 


HER P 


创建 带 有 拨 动 密码 显示 或 隐藏 功能 的 密码 表单 。 


用 法 


要 使 用 这 个 组 件 ， 添 加 uk-form-password 类 到 一 个 包含 着 密码 输入 框 的 
&lt;div&gt; 元 素 。 创 建 拨 动 密码 显示 和 隐藏 的 按钮 ， 只 需要 添加 
.uk-form-password-toggle 类 和 data-uk-form-password 属性 到 
&lt;a&gt; 元 素 即 可 。 注 意 使 用 此 组 件 需 要 额外 添加 form-password.css x 

件 ， 在 css/components 文件 夹 中 。 此 组 件 需 要 额外 添加 form-password.js 

文件 ， 在 js/components 文件 夹 中 。 


Example 


*s2222252 


Markup 


«form class="uk-form"> 
«div class-"uk-form-password"» 
«input type-"password"- 
«a hrefz"" class-'uk-form-password-toggle" data-uk-form-pa: 
«/div» 
«/form» 
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JavaScript 选项 
这 是 一 个 如 何 通过 属性 设置 选项 的 例子 : 


data-uk-form-password-"(lblShow:'...', lblHide:'...')" 


选项 
lblShow 
lblHide 


可 用 值 
任意 string 
任意 string 


默认 值 
Show 
'Hide' 


选择 表单 


使 用 按钮 、 文 本 等 HTML 内 容 替 代 黑 认 的 选择 表单 。 
Jt; 


使 用 这 个 组 件 ， 只 需 添加 .uk-form-select 类 和 data-uk-form-select E 
到 包含 &lt;span&gt; 和 &lt;select&gt; 元 素 的 容器 元 素 中 。 基 本 上 ， 

用 自 定 义 的 Ulkit 表 单 履 盖 默 认 的 选择 表单 。 注 意 使 用 此 组 件 需要 额外 添加 
form-select.css 文件 ， 在 css/components 文件 夹 中 。 此 组 件 需 要 额外 添加 
form-select.js 文件 ， 在 js/components 文件 夹 中 。 


Example 


Option 01 
Option 02 | 
Option 03 
Option 04 | 


Markup 


«div class-"uk-form-select" data-uk-form-select» 
<span></span> 
<select> 
«option valuez""»...«/option» 
«option valuez""»...«/option» 
«/select» 
«/div» 


类 似 于 按钮 
添加 .uk-button 类 到 容器 元 素 ， 使 之 看 起 来 像 个 按钮 。 


Option 01 +» 
aet 02 
Option 03 
Option 04 


Markup 


«div class-"uk-button uk-form-select" data-uk-form-select»...«/div: 
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类 似 于 锚 文 本 


你 可 以 使 用 任意 元 素 作 为 选择 表单 ， 比 如 &lt;a&gt; 元 素 。 只 需 添加 
(target:'a') 选项 到 data-uk-form-select 属性 ， 并 使 用 &lt;a&gt; 替 
R &lt;span&gt; 元 素 。 


Example 


Option 01 
Option 01 
Option 02 
Option 03 
Option 04 | 


Markup 


«div class-"uk-form-select" data-uk-form-select-"[target:'a')'"» 
<a></a> 
«select»...«/select» 

«/div» 


创建 一 个 占 位 符 空间 ， 可 以 用 于 拖 找 上 传 文件 。 


Usage 


这 个 组 件 适 用 于 设计 一 些 特殊 的 区 域 来 创建 一 个 占 位 符 空间 . 只 需要 添加 
.Uk-placeholder 类 到 &lt;div&gt; 元 素 中 。 注 意 使 用 此 组 件 需要 额外 添加 
placeholder.css 文件 ， 在 css/components 文件 夹 中 。 


Example 


Markup 


«div class-"uk-placeholder"»...«/div» 


大 空间 占 位 符 
你 还 可 以 在 占 位 符 空 间 上 增加 高 度 ， 使 用 .uk-placeholder-large 类 。 


Example 


Ulkit 中 文 


AM 
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进度 — 
为 进度 条 定义 不 同样 式 。 
用 法 


进度 条 由 背景 帮 条 本 身 组 成 ， 用 来 体现 增长 。 注 意 使 用 此 组 件 需 要 额外 添加 
progress.css sus > 在 css/components 文件 夹 中 。 


Class 描述 
.Uk-progress 该 类 用 在 父 元 素来 创建 进度 条 的 背景 。 


.Uk-progress-bar 该 类 需要 被 添加 至 子 元 素 用 于 创建 实际 的 进度 条 。 


Example 


Markup 


«div class-"uk-progress'» 


«div class-"uk-progress-bar" style="width: 4096; "24096«/div» 
«/div» 


尺寸 调整 


添加 .uk-progress-mini 或 .uk-progress-small 类 用 于 改变 进度 条 的 尺 
4e 


Example 





Markup 
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«div class-"uk-progress uk-progress-mini"»...«/div» 
«div class-"uk-progress uk-progress-small'"»...«/div» 


闫 色调 整 
要 在 您 的 进度 条 中 应 用 不 同 的 颜色 ， 仅 需 添加 


.Uk-progress-success * .uk-progress-warning 或 
.uk-progress-danger 类 。 


Example 


Markup 


«div class-"uk-progress uk-progress-success"»...«/div» 
«div class-"uk-progress uk-progress-warning'»...«/div» 
«div class-"uk-progress uk-progress-danger"'»...«/div» 


使 用 .striped 类 ， 创 建 一 个 带 条 纹 的 进度 条 。 
Example 

FLESPCG«ÁÀÁÀESISISIIZISZIVEASMX 
Markup 


«div class-"uk-progress uk-progress-striped"»...«/div» 


甚至 可 以 使 条 级 动 起 来 。 为 此 ， 仅 需 添加 .uk-active X» 


Markup 

«div class-"uk-progress uk-progress-striped uk-active"»...«/div» 
组 合 
进度 条 组 件 的 所 有 调整 类 可 以 互相 组 合 使 用 。 


Example 


Markup 


«div class-"uk-progress uk-progress-small uk-progress-danger uk-pr« 
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灯箱 /Lightbox 

利用 模 态 对 话 框 为 图 片 和 视频 创建 一 个 别致 的 灯箱 。 

用 法 

要 使 用 这 个 组 件 ， 添 加 data-uk-lightbox 属性 到 一 个 链接 到 图 片 的 锚 文 本 中 。 


如 果 title 属 性 存在 ， 它 将 会 被 显示 为 灯箱 的 标题 。 


注意 此 组 件 需 要 额外 添加 lightbox.js 文件 ， 在 js/components 文件 夹 中 。 


Example 





Markup 


«a hrefz'"my-image.jpg" data-uk-lightbox title="">...</a> 


组 /Groups 


你 可 以 链接 多 个 图 片 到 同一 个 灯箱 中 ， 并 在 灯箱 内 切换 显示 ， 就 是 一 个 画廊 了 。 只 
需 添 加 (group:'my-group') 选项 到 每 个 单元 的 data 属 性 ， 并 且 每 个 单元 使 用 同 
一 个 grou 名 称 ， 以 显示 在 同一 个 灯箱 中 。 你 需要 确保 你 已 经 引入 了 滑动 导航 组 件 
的 CSS， 这 样 你 才能 在 灯箱 里 切换 显示 各 个 单元 。 





Markup 


«a hrefz"" gata-uk-lightbox-"[(group:'my-group']"»...«/a» 


不 同 的 内 容 源 


灯箱 并 不 限于 图 片 展示 。 其 他 的 媒体 ， 比 如 视频 ， 也 可 以 显示 在 灯箱 中 ， 它 会 通过 
判断 路 径 自动 生成 能 正常 的 输出 效果 。 


Example 


Image MP4 Vimeo YouTube 


内 容 类 型 


如 果 路 径 中 没有 文件 扩展 名 ， 只 需要 添加 data-lightbox-type-"image" /& 
性 ， 视 频 就 能 正常 播放 了 。 


JavaScript 选项 


默认 


选项 可 用 值 " 描述 
EL 
2 Xe 2-2 ; X m JER UE 4 
group string false ES 用 来 将 元 素 分 组 ， 作 为 画廊 进行 展 
duration | integer | 400 画廊 切换 内 容 时 的 动画 持续 时 间 。 
keyboard ^ boolean true 允许 使 用 键盘 翻 页 
手动 初始 化 


var lightbox = UIkit.lightbox(element, { /* options */ }); 


创建 动态 灯箱 


var lightbox = Ulkit.lightbox.create([ 
('source': 'http://ur1/to/vide 
('source': 'http://ur1/to/imag: 


1); 
lightbox.show(); 


T dad E 
T 





A A 参数 描述 


showitem.uk.lightbox event, data 灯箱 显示 时 


自动 完成 /Autocomplete 


创建 允许 在 输入 时 从 预 生 成 列表 中 进行 选 值 的 输入 框 。 


用 法 


要 使 用 这 个 组 件 ， 需 要 添加 ,uk-autocomplete 类 到 一 个 包含 input 元 素 的 
&lt;div&gt; 中 。 为 了 使 自动 完成 输入 框 所 需要 的 JavaScript 生 效 ， 你 还 需要 添 

加 data-uk-autocomplete 属性 。 添 加 [(source:'PATH/TO/RESULTS') 到 

data 属 性 中 ， 并 设置 需要 用 JSON 进 行 格式 化 的 自动 完成 列表 的 路 径 (示例 )。 下拉 
菜单 会 被 注入 需要 显示 出 来 的 自动 完成 建议 。 你 甚至 可 以 用 键盘 上 的 上 下 键 来 浏览 
下 拉 菜 单 。 

注意 使 用 此 组 件 需 要 额外 添加 autocomplete.css 文件 ， 

在 css/components 文件 夹 中 。 此 组 件 需 要 额外 添加 autocomplete.js 文件 ， 
在 js/components 文件 夹 中 。 


Example 


Hamburg 


Hamburg 
New York 
MOSCOW 


Amsterdam 


提示 尝试 输入 这 些 词 语 : Hamburg, New York, Moscow or Amsterdam. 


«div class-"uk-autocomplete uk-form" data-uk-autocomplete-'[source 
«input type="text"> 
«/div» 





Ulkit 中 文 文档 


Example 


123| 


Hamburg title 


Lorem ipsum dolor sit amet 
consectetur 





New York 
Utenim ad minim veniam, quis 
nostrud ... 


Moscow 
Duis aute irure dolor in 
reprehenderit.. 


Amsterdam 
Excepteur sint occaecat 
cupidatat non ... 


Markup 


«div class-"uk-autocomplete uk-form" data-uk-autocomplete-"[source. 
«input type="text"> 
«script type-'"text/autocomplete"- 
«ul class-"uk-nav uk-nav-autocomplete uk-autocomplete-resu- 


((-items)) 
«li data-value-"(( $item.value }}"> 
«a» 


(( Sitem.title }} 
<div>{{{ $item.text }}}</div> 
</a> 
</li> 
{{/items}} 
</ul> 
</script> 
</div> 


Aoo ë E 





JavaScript 选项 


自动 完成 /Autocomplete 272 


选项 可 用 什 默认 值 描述 


url, array, 237 
SES callback function 1 数据 源 


触发 自动 完成 的 最 小 输入 


inLength i ; 
minLeng integer 3 长 度 
param string sach 发 送 ajax 请 求 时 的 查询 名 称 
(Query name ) 
delay integer 300 停止 输入 后 的 延 时 
flipDropdown boolean false 翻转 显示 结果 的 下 拉 菜 
手动 初始 化 


var autocomplete = UIkit.autocomplete(element, { /* options */ }); 


4 M [I 
事件 


A RiR 参数 描述 
selectitem.uk.autocomplete xp 某 个 值 被 选择 时 触发 
自动 完成 下 拉 菜 单 显 


show.uk.autocomplete d à 
d SIE 示 时 触发 


A 31 354€ 2: /Datepicker 


创建 带 有 日 期 选择 器 的 可 拨 动 触发 的 下 拉 菜 单 。 


用 法 


创建 日 期 选择 器 ， 只 需要 为 &lt;input&gt; 元 素 添 加 data-uk-datepicker 
属性 。 还 可 以 自 定义 日 期 的 格式 ， 为 data-uk-datepicker 属性 添加 format 选 
项 就 能 实现 。 


注意 使 用 此 组 件 需 要 额外 添加 datepicker.css 文件 ， 在 css/components X 
件 夹 中 。 此 组 件 需要 额外 添加 datepicker.js 文件 ， 在 js/components 文件 
XT 


日 期 选择 器 会 检测 选择 表单 组 件 的 JavaScript 是 否 被 加 载 。 这 允许 你 在 日 期 选择 器 
中 通过 一 个 选择 表单 快捷 地 切换 年 月 。 
Example 


< May 2016 > 


Mon Tue Wed Thu Fri Sat Sun 


Markup 


«form class-"uk-form"» 
«input type="" data-uk-datepicker-z"(format: 'DD.MM. YYYY'"» 
«/form» 


JavaScript 选项 
这 是 关于 如 何 通过 属性 设置 选项 的 例子 


data-uk-datepicker-z"(weekstart:0, format: 'DD.MM.YYYY')" 


选项 可 用 值 默认 值 描述 
每 周 开 
weekstart integer (0..6) 1 始 的 第 
=R 
iem ISON ODEA ( months:['January',...], 日 期 的 
| weekdays:['Sun',.,'Sat]} ”称呼 
inati 期 格 
f t any combination of ， ， H J 
orma DD, MM and YYYY DD.MM.YYYY X 
输入 值 
offsettop integer 2 的 偏 移 
量 
QIBUSUS bool (false to ignore 


the option) 
string (date asin format ) integer (offset in days from current date) | false | 最 小 
日 期 | | maxDate |bool (false to ignore the option) string (date as in format ) 


integer (offset in days from current date) | false | 最 大 日 期 || pos |'auto', 'top', 
'bottom' | 'auto' | 日 期 选择 器 出 现 的 位 置 | 


手动 初始 化 


var datepicker = UIkit.datepicker(element, { /* options */ 3); 


事件 
名 称 参数 描述 
show.uk.datepicker event 日 期 选择 器 菜单 显示 时 触发 
hide.uk.datepicker event 日 期 选择 器 菜单 隐藏 时 触发 
update.uk.datepicker event 日 历 演 染 时 触发 


HTML 7& £& 25 


创建 可 以 实时 预览 并 且 带 有 语法 高 亮 的 富 文本 编辑 器 或 Markdown 编 辑 器 。 


这 个 HTML 编 辑 器 可 以 你 在 输入 HTML 或 Markdown 时 ， 生 成 实时 预览 。 它 包含 一 个 
' 帮助 你 无 需 任 何 代 码 就 能 进行 文本 的 编辑 、 添 加 链接 、 图 片 、 引 用 和 列表 

。 本 编辑 器 还 为 HTML 代 码 和 Markdown 代 码 提 供 了 语法 高 亮 ， 并 且 你 还 能 切换 全 
na 2 TER TA s 


用 法 
人 人 ， 你 首先 必须 引入 必要 的 CodeMirror 和 marked 依赖 。 要 实现 它 ， 
只 需要 在 项 目的 headerz 加 入 适当 的 脚本 代码 就 行 。 


注意 使 用 此 组 件 需要 额外 添加 htmleditor.css 文件 ， 在 css/components x 
件 夹 中 。 此 组 件 需 要 额外 添加 htmleditor.js 文件 ， 在 js/components 文件 
夹 中 。 


<!DOCTYPE html» 


«html» 

«head» 
«title»«/title» 
«link rel="stylesheet" href-z'"uikit.min.css" /> 
«script srcz"jquery.js"»«/script» 
«script src-"uikit.min.js'"»«/script» 
«!-- Codemirror 和 marked 依赖 --> 
«link rel="stylesheet" href-z'"codemirror/lib/codemirror.css' 
«script srcz"codemirror/lib/codemirror.js"»«/script» 
«script src-z"codemirror/mode/markdown/markdown. js"»«/scrip! 
«script src-z"codemirror/addon/mode/overlay.js"»«/script» 
«script src-'"codemirror/mode/xml/xml.js"»«/script» 
«script srcz"codemirror/mode/gfm/gfm.js"»«/script» 
«script src-"marked.js"»«/script» 
«!-- HTML 编辑 器 的 CSS 与 JavaScript --» 
«link rel="stylesheet" href-'"htmleditor.css'» 
«script src-"htmleditor.js"»«/script» 

«/head» 

«body» 

«/body» 

«/html» 


国 mu 











元 素 添 加 data-uk-htmleditor 属性 就 行 


o 


dUs * f &lt;textarea&gt; 
$11! 


Example 


Xhl^Headinzc/hl» 


<p>Lorem ipsum dolor sit 
Cstrong?ametCi/strong?, consectetur 
adipisicing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna 
aliqua. <a href- WH^»This is a link</a> 
</p> 


<ul> 
<liItem</li> 
<li>Item</li> 
<li>Item</li> 
</ul> 


<h2>Heading </h2> 


<pòUt enim ad Cem>minim /em> veniam, 


quis nostrud exercitation ullamco 


Heading 


Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua 
This is a link 


. item 
. [tem 
. [tem 


Heading 


Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure 
dolor in reprehenderit in voluptate velit 


laboris nisi ut aliquip ex ea commodo esse cillum dolore eu fugiat nulla pariatur 


consequat. Duis aute irure dolor in 
reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. 


</p> 


Markup 


<textarea data-uk-htmleditor>...</textarea> 


Markdown 


还 可 以 在 HTML 编 辑 器 中 编写 Markdown。 只 需 为 data 属 性 添加 markdown:true 
选项 就 行 。 


Example 
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#Heading 


Lorem ipsum dolor sit **amet**, 
consectetur adipisicing elit, sed do 


eiusmod tempor incididunt ut labore et 


dolore magna aliqua. [This is a link] (#) 


* Item 
* Item 


* Ttem 
iHi! Heading 


Ut enim ad *"mznzm* veniam, quis nostrud 
exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat. Duis aute 
irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla 


pariatur. 


<a href2^ W^»This link is written in 
HTML /a> 


Markup 


Heading 


Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua 
This is a link 


. [tem 
。 item 
s [tem 


Heading 


Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure 
dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur 


This link is written in HTML 


«textarea data-uk-htmleditor-z"([markdown:true)"»...«/textarea» 


xb 5 T 


也 可 以 在 Markdown 与 预览 模式 之 间 进 行 切换 。 只 


需 添加 


data-uk-htmleditor-"(mode:'tab') 属性 。 


Example 
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Markdown Preview Eg 


#Heading 


Lorem ipsum dolor sit **amet**, consectetur adipisicing elit, sed do eiusmod tempor 


incididunt ut labore et dolore magna aliqua. [This is a link] (#) 

* Item 

* Item 

* Item 

iHi Heading 

Ut enim ad *minim* veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
dolore eu fugiat nulla pariatur. 


<a href="#° >HINL syntax highlightning</a> 


Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 


anim id est laborum. 


Markup 


«textarea data-uk-htmleditor-"([mode:'tab')"»...«/textarea» 


JavaScript 选项 
这 是 如 何 通过 属性 设置 选项 的 例子 : 


data-uk-htmleditor-"([mode:'split', maxsplitsize:600]" 


选项 


mode 


toolbar 


maxsplitsize 


lblPreview 


lblCodeview 


手动 初始 化 


var htmleditor 


可 用 值 


'split', 
'tab' 


Array 


integer 


任意 
String 


任意 
string 


UIkit. 


默认 值 
'split' 
[ "bold", "italic", 
"strike", "link", 
"picture", ... ] 
1000 
'Preview' 
'Markdown' 


描述 


视图 模式 


工具 栏 上 显示 的 按钮 列表 


触发 由 分 割 模式 切换 到 选项 
卡 模式 的 响应 式 行为 的 最 小 


Ww SR 


浏览 器 视 口 宽度 。 
预览 模式 的 标签 字符 囊 
(Label string) 


代码 模式 的 标签 字符 串 
( Label string ) 


htmleditor(textarea, ( /* options */ )); 


Ulkit P x x 


i& 4 &lISlider 


创建 一 个 可 以 作为 响应 式 旋 转 木 马 滚动 条 的 条 目 列 表 。 
滚动 条 能 响应 式 地 显示 元 素 ， 可 以 通过 鼠标 和 触摸 手势 滚动 。 


用 法 


要 使 用 滚动 条 组 件 ， 需 要 为 包含 .uk-slider-container 元 素 的 容器 元 素 添 加 
data-uk-slider 属性 。 添 加 条 目的 列表 ， 并 为 此 列表 添加 .uk-slider X 
使 用 .uk-width-* 和 .uk-grid-width-* 类 以 确定 每 次 显示 多 少 个 元 素 。 


注意 使 用 此 组 件 需要 额外 添加 slider.css 文件 ， 在 css/components x fX 
中 。 此 组 件 需 要 额外 添加 slider.js 文件 ,在 js/components 文件 夹 中 。 


Example 





Markup 


<div data-uk-slider> 
«div class="uk-slider-container"> 
«ul class="uk-slider uk-grid-width-medium-1-4"> 
«li»...«/li» 


«/ul» 
«/div» 


«/div» 


导航 /Navigation 


滚动 条 /Slider 281 
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滚动 条 本 身 可 以 使 用 鼠标 点 击 和 拖 搜 或 者 触 屏 设 备 中 滑动 进行 滚动 。 添 加 一 个 可 以 
点 击 的 滑动 导航 也 是 个 好 主意 。 滑 动 导航 添加 的 箭头 按钮 会 在 鼠标 悬 停 在 滑动 条 上 
时 显示 出 来 。 


Example 


«div class-"uk-slidenav-position" data-uk-slider» 
«div class-"uk-slider-container'» 
«ul class-'"uk-slider uk-grid-width-medium-1-4"» 
seges 


«/ul» 


«/div» 
«a href="" class-"uk-slidenav uk-slidenav-contrast uk-slidenav: 
«a href="" class-"uk-slidenav uk-slidenav-contrast uk-slidenav: 


«/div» 


-二 — E 





居中 模式 /Center Mode 


歌 认 情况 下 ， 滚 动 条 的 元 素 总 是 对 齐 滚 动 条 容易 的 左边 缘 。 如 果 你 想 让 元 素 居 中 ， 
设置 center 属性 的 值 为 true Rp 


注意 被 居中 的 列表 元 素 通常 会 被 添加 .uk-active 类 。 如 果 你 想 高 亮 显示 居中 的 
元 素 ， 添 加 该 类 名 即 可 。 


Example 


Markup 


L 
N 3 
Y 
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<div data-uk-slider="{center:true}"> 
<div class="uk-slider-container"> 
«ul class-"uk-slider uk-grid-width-medium-1-4"> 
«bsc 


«/ul» 
«/div» 


«/div» 


禁用 无 限 滚 动 


默认 情况 下 ， 深 动 条 循环 显示 所 有 条 目 。 要 禁用 这 种 行为 ， 设 置 infinite 参数 
为 false 即 可 。 在 启用 或 禁用 居中 模式 中 都 同样 有 效 。 


Example 





Markup 


<div data-uk-slider="{infinite: false}"> 
«div class="uk-slider-container"> 
«ul class-"uk-slider uk-grid-width-medium-1-4"> 
spe Is 


«/ul» 
«/div» 


«/div» 


& BH HFK [Item gutter 


滚动 条 /Slider 283 
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如 果 你 想 为 滚动 条 中 的 元 素 添 加 间距 ， 添加 .uk-grid 类 到 滚动 条 容器 即 可 。 元 
素 将 会 根据 网 格 排水 沟 尺 寸 被 分 隔 开 。 


注意 你 可 以 使 用 网 格 的 修饰 类 uk-grid-medium 和 uk-grid-small 来 调整 排 
水 沟 的 尺寸 。 


Example 


& B 55/2 Item width 


如 果 要 设置 滚动 条 中 各 元 素 的 宽度 ， 使 用 Ulkit 网 格 中 的 宽度 类 即 可 。 既 可 以 在 滚 
动 条 容器 上 使 用 uk-grid-width-* 类 名 ， 也 可 以 为 列表 中 每 个 条 目 单独 使 用 
uk-width-* 类 名 。 


Example: 为 条 目 单独 设置 宽度 


Markup 


«div data-uk-slider» 
«div class-'"uk-slider-container"» 
«ul class-z"uk-slider'» 
«li class-'"uk-width-1-3"»5...«/li» 
«li class-'"uk-width-1-5"»5...«/li» 
«li class-'"uk-width-2-5"»...«/li» 


«/ul» 
«/div» 


«/div» 


响应 式 行为 
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为 了 适应 不 同 的 视 口 ， 你 可 以 使 用 网 格 的 响应 式 类 名 。 在 下 面 的 例子 中 ， 滚 动 条 会 
在 大 视 口 中 显示 4 个 条 目 ， 在 中 视 口 中 显示 3 个 ， 在 小 视 口 中 显示 一 个 。 


Example: 响应 式 宽度 


<1 





Markup 


<div data-uk-slider> 


<div class="uk-slider-container"> 
«ul class="uk-slider uk-grid-width-medium-1-3 uk-grid-widtl 
«li»...«/li» 


«/ul» 
«/div» 


«/div» 





滚动 条 包含 全 屏 模式 ， 在 全 屏 模式 下 ， 滚 动 条 将 延伸 至 100% 的 视 口 高 度 。 


«div data-uk-slider» 
«div class-"uk-slider-container"'"» 
«ul class-"uk-slider uk-slider-fullscreen"» 
«li»...«/li» 


«/ul» 
«/div» 


«/div» 
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选项 可 用 值 
center boolean 
threshold boolean 
infinite boolean 
activecls string 
autoplay false 
pauseOnHover boolean 
autoplayInterval integer 

手动 初始 化 元 素 


默认 值 描述 

false 条 目 居中 模式 

TG 4 sh RAT Ak A A K eo A 
值 ， 以 像素 为 单位 。 

true ARR 

uk- 在 居中 模式 中 ， 添 加 到 被 选中 


active 条 目 上 的 类 名 。 


是 否 让 滚动 条 的 内 容 条 目 自动 
切换 


鼠标 巧 停 在 滚动 条 上 时 暂停 播 
true e 


boolean 


切换 滚动 条 内 容 条 目的 时 间 间 
fr 


7000 


var slider - Ulkit.slider(element, ( /* options */ 3); 


事件 /Events 


事件 名 


Parameter 描述 


focus.uikit.slider event, index, item 条 目 获 得 焦点 时 触发 
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滑 块 集 /Slideset 
创建 条 目的 组 和 集合 ， 并 允许 循环 显示 。 


用 法 


使 用 这 个 组 件 需要 为 容器 元 素 添加 data-uk-slideset 属性。 添加 default 
选项 到 data-uk-slideset 属性 ， 调 整 一 个 滑 块 集中 条 目的 个 数 。 
注意 此 组 件 需要 额外 添加 slideset.js 文件 ， 在 js/components 文件 夹 中 。 


Example 


Markup 





«div data-uk-slideset-"(default: 4j"» 
«ul class-"uk-slideset"» 


«li»«img srcz"" altz'""»«/li» 
«li»«img srcz"" altz'""»«/li» 
«/ul» 
«/div» 
导航 /Navigations 


为 滑 块 集 添加 导航 ， 只 需 使 用 uk-slideset-nav 类 。 它 将 动态 地 创建 一 个 基于 
现 有 滑 块 数量 的 导航 。 


Markup 
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<div data-uk-slideset="{default: 4}"> 
«ul class="uk-slideset"> 
<li>...</li> 
dit p e a A 
</ul> 
«ul class="uk-slideset-nav">...</ul> 
</div> 


要 切换 相 邻 的 滑 块 ， 使 用 data-uk-slideset-item 属性 ， 并 设置 该 属性 的 值 为 
next 和 previous 。 这 些 带 有 data-uk-slideset-item 属性 的 元 素 必须 放 
在 带 有 data-uk-slideset 属性 的 容器 中 。 


Markup 


«div data-uk-slideset="{default: 4}"> 
«ul class-"uk-slideset'» 
eqq eus 
<li>...</li> 
</ul> 
<a href=""data-uk-slideset-item="previous"></a> 
«a href=""data-uk-slideset-item="next"></a> 
</div> 


H3 3E I 3*-S-«uSslidenav and Dotnav 


你 可 以 使 用 Ulkit 的 其 他 任意 组 件 来 做 滑 块 集 的 导航 。 比 如 Slidenav 和 Dotnav 可 
以 做 出 像 下 面 例 子 这 样 的 导航 。 


Example 


Markup 
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<div data-uk-slideset="{default: 4}"> 
<div class="uk-slidenav-position"> 
«ul class="uk-slideset"> 
<li> m </> 
<li> </> 


</ul> 

«a href="" class="uk-slidenav uk-slidenav-previous" data-ul 

«a href="" class-"uk-slidenav uk-slidenav-next" data-uk-sl: 
«/div» 


«ul class-"uk-slideset-nav uk-dotnav uk-flex-center"»...«/ul» 
«/div» 


Ke 





响应 式 条 目 /Responsive items 


滑 块 集 支持 基于 条 目 可 见 性 的 媒体 查询 。 只 需 添 加 一 个 断 点 选项 到 
data-uk-slideset 属性 中 ， 比 如 small , medium , large 。 并 设置 在 该 断 
点 宽度 以 上 的 视 口 中 你 想 要 显示 的 条 目 数 ， 如 下 面 例子 所 示 : 


Example 


Markup 





«div data-uk-slideset="{small: 2, medium: 4, large: 6}">...</div> 


ET 2 





动画 /Animations 


这 里 有 那么 多 的 动画 可 以 用 在 滑 块 集 里 ， 用 来 显示 下 一 批 滑 块 。 只 要 为 
data-uk-slideset 添加 animation 选项 并 设置 你 想 要 的 动画 。 动 画 的 持续 时 
间 可 以 通过 设置 duration 选项 来 修改 。 
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动画 描述 

fade BAGUE 

scale 缩放 

slide-horizontal 水 平滑 入 滑 出 

slide-vertical 3E TH ACH 

slide-top 从 顶部 滑 出 ， 从 顶部 滑 入 

slide-bottom 从 底部 消 出 ， 从 底部 滑 入 
Example - 在 下 拉 框 里 选 你 想 要 预览 的 

fade Y 


Markup 


«div data-uk-slideset-" (animation: 'scale', duration: 200}">...</d: 





E 


it 3&[Filter 

你 还 可 以 使 用 过 滤 来 实现 只 显示 滑 块 集中 特定 的 条 目 。 为 此 ， 需 要 为 每 个 过 滤 控 件 
添加 data-uk-filter 属性 来 规定 它们 过 滤 的 分 类 。 然 后 还 要 为 每 个 滑 块 条 目 添 
加 data-uk-filter 属性 来 规定 它们 各 自 属于 哪个 分 类 “。 


注意 过 滤 控 件 可 以 放 在 滑 块 集中 ， 或 者 ， 为 过 滤 控 件 添加 controls 选项 到 
data-uk-slideset 属性 中 ， 并 将 滑 块 集 的 id 设置 在 该 选项 中 。 如 下 面 的 例子 : 


Example 
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四 Fiter A Filter B 





Markup 


<1-- 过 滤 控 件 包含 在 滑 块 集中 --> 
«div data-uk-slideset» 
«ul» 
<li data-uk-filterz'""»«a»«/a»«/li» 
<li data-uk-filter-z"filter-a'"»«a»«/a»«/li» 
<li data-uk-filter-z"filter-b'"»«a»«/a»«/li» 
«/ul» 


«ul class="uk-slideset"> 
«li data-uk-filter-"filter-a"»«img src=""></1i> 
«li data-uk-filter-z"filter-b'"»«img src=""></1i> 
«/ul» 
«/div» 


«1-- 过 滤 控 件 在 滑 块 集 外 面 --> 
«ul id="my-id"> 
<li data-uk-filter=""><a></a></1i> 
<li data-uk-filter="filter-a"><a></a></li> 
<li data-uk-filter="filter-b"><a></a></li> 
</ul> 


<div data-uk-slideset"{controls: '#my-id'}"> 
<ul class="uk-slideset"> 
«li data-uk-filter="filter-a"><img src=""></1i> 
«li data-uk-filter="filter-b"><img src=""></1i> 
</ul> 
</div> 


JavaScript 选项 
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选项 可 用 值 
default integer 
small integer 
medium integer 
large integer 
xlarge integer 
animation string 
duration integer 
delay integer 
filter string 
autoplay Boolean 
pauseOnHover Boolean 
autoplayInterval integer 

手动 初始 化 


false 


true 


7000 


描述 


一 个 滑 块 集中 默认 可 见 条 目 数 
小 视 口 (small) 中 显示 的 条 目 数 


中 视 口 (medium) 中 显示 的 条 目 
数 


大 视 口 (large) 中 显示 的 条 目 数 


特大 视 口 (Xlarge) 中 显示 的 条 
A Zx 


动画 的 名 字 
以 毫秒 为 单位 的 动画 持续 时 间 


一 个 滑 块 集中 多 个 条 目 之 间 的 动 
画 延 时 。 


滑 块 条 目 过 滤 
定义 滑 块 集 条 目 是 否 自动 播放 


和 鼠标 悬 停 在 滑 块 集 上 时 ， 赞 同 自 
动 播放 


切换 滑 块 集 条 目的 时 间 间 丙 


var slideset = UIkit.slideset(element, ( /* options */ }); 


事件 


名 称 


show.uk.slideset 


2 


event, set 


六 


描述 
滑 块 集 显示 时 触发 


411 Ah Slideshow 


创建 可 以 全 屏 模 式 和 遮 唱 效果 的 ， 具 有 炫 酷 过 渡 效 果 的 响应 式 图 片 或 视频 幻灯 片 。 


用 法 


要 创建 幻灯 片 ， 只 需要 添加 .uk-slideshow 类 到 一 个 &lt;ul&gt; 元 素 中 ， 
并 将 你 的 图 片 放 入 列表 条 目 内 。 为 了 加 载 必要 的 JavaScript， 还 需要 添加 
data-uk-slideshow 属性 。 


注意 使 用 此 组 件 需 要 额外 添加 slideshow.css 文件 ,在 css/components 文件 
夹 中 。 此 组 件 需 要 额外 添加 slideshow.js 文件 ， 在 js/components 文件 夹 
中 o 


Example 


注意 如 果 需 要 自动 播放 ， 为 data 属 性 添加 (autoplay:true) 选项 就 行 了 。 
Markup 


«ul class-"uk-slideshow" data-uk-slideshow-"[autoplay:true]"» 
«li»«img srcz"" widthz"" heightz"" alt=""></1i> 
«/ul» 


导航 /Navigations 


在 幻灯 片 中 进行 导航 ， 使 用 data-uk-slideshow-item 属性 就 行 。 为 了 能 指向 幻 
灯 片 ， 你 必须 为 每 个 导航 单元 设置 data 属 性 指向 每 个 幻灯 片 单 元 的 序号 。 带 有 
data-uk-slideshow-item 属性 的 元 素 需 要 被 放置 在 带 有 
data-uk-slideshow 的 容器 中 。 


Markup 


«div data-uk-slideshow» 
«ul class-"uk-slideshow'» 


«li»«/li» 

«li»«/li» 
«/ul» 
«li data-uk-slideshow-item-"9o"»«a hrefz"'"»,..«/a»«/li» 
«li data-uk-slideshow-item-"i1"»«a href="">, ..</a></li> 


«/div» 


将 data 属 性 设置 为 next and previous 就 能 进行 相 邻 幻灯 片 之 间 的 切换 。 像 这 
样 : 


Markup 


«div data-uk-slideshow» 
«ul class-"uk-slideshow'» 


«li»«/li» 

«li»«/li» 
«/ul» 
«a hrefz"" data-uk-slideshow-item-"previous"»«/a» 
«a hrefz"" data-uk-slideshow-item-"next"»«/a» 


«/div» 


滑动 导航 和 圆 点 导航 


幻灯 片 组 件 的 灵活 性 使 之 可 以 用 任何 其 他 Ulkit 组 件 进行 幻灯 片 的 导航 。 比 如 消 动 导 
航 和 辆 点 导航 可 以 用 来 像 下 面 这 样 作为 幻灯 片 的 导航 。 


Example 





Markup 


«div class-"uk-slidenav-position" data-uk-slideshow» 
«ul class="uk-slideshow"> 


«li»«/li» 

«li»«/li» 
«/ul» 
«a hrefz"" classz"uk-slidenav uk-slidenav-contrast uk-slidenav: 
«a hrefz"" classz"uk-slidenav uk-slidenav-contrast uk-slidenav: 


«ul class-"uk-dotnav uk-dotnav-contrast uk-position-bottom uk-i 
«li data-uk-slideshow-item-"0"»«a href=""></a></1i> 
«li data-uk-slideshow-item-"1"»«a href=""></a></1i> 
</ul> 
</div> 


sj 一 -一 





过 渡 形 式 


幻灯 片 组 件 允 许 添 加 不 同 的 幻灯 片 切 换 效 果 。 你 需要 做 的 就 是 将 animation 参 
数 添加 到 data 属 性 中 ， 并 声明 你 希望 使 用 的 动画 。 查 看 下 面 的 表格 了 解 咱 都 提供 了 
哪些 动画 效果 。 


Class 描述 


fade 淡 入 

scroll 滚动 进入 

scale 放大 

swipe 滑动 进 和 入、 滑动 离开 


要 使 用 下 面 这 些 增强 的 过 渡 效 果 ， 必 须 在 文档 head 中 引入 slideshow-fx.js ° 
下 面 表 格 不 翻译 了 ， 看 后 面 的 演示 吧 。 


Class 描述 
slice-down The items slide down in slices. 
slice-up The items slide up in slices. 


slice-up-down The sliced items slide in alterning directions. 
fold The items are folded in. 
puzzle The items are divided in squares that randomly fade in. 


The items are divided in squares that scale in diagonally 


boxes 
from the top left corner. 


The items are divided in squares that scale in diagonally 


boxes-reverse . 
from the bottom right corner. 


random-fx Different animations are applied randomly. 


Markup 


«ul class-"uk-slideshow" data-uk-slideshow-"([animation: 'random-fx 


EE) 





Ken Burns 效果 


炫 酷 的 Ken Burns 效果 也 能 用 在 幻灯 片 里 。 只 需要 添加 {kenburns:true} 选项 
到 data 属 性 中 就 行 。 这 个 效果 还 能 用 在 视频 上 。 


Example 





Markup 


«ul class-"uk-slideshow" data-uk-slideshow-"[(kenburns:truej"»...«/1 
Hi LA 


自 定义 动画 持续 时 间 : 








«ul class-"uk-slideshow" data-uk-slideshow="{kenburns:'30s'}">...<, 


JEES 





全 屏 幻灯 片 


创建 十 满 整个 视 口 的 全 屏 幻 灯 片 ， 只 需要 添加 一 个 .uk-slideshow-fullscreen 
类 。 


Markup 


«ul class-"uk-slideshow uk-slideshow-fullscreen" data-uk-slideshow: 


I — Og 





Je 


还 可 以 用 遮 章 来 提升 幻灯 片 的 效果 ， 为 幻灯 片 列 表 条 目 内 的 &lt;div&gt; 元 素 
添加 .uk-uk-overlay-panel 类 就 行 。 添 加 .uk-overlay-background 和 

.uk-overlay-fade 带 来 背景 与 过 渡 效 果 。 要 实现 幻灯 片 显 示 时 即 触发 这 单 ， 添 
加 .uk-uk-overlay-active 到 列表 容器 即 可 。 更 多 选项 查看 St. 


Example 


Overlay 


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam. 


Button 





Markup 


«ul class-"uk-slideshow uk-overlay-active" data-uk-slideshow» 
«li» 
«img srcz"" widthz"" height="" alt=""> 
«div class-"uk-overlay-panel uk-overlay-background uk-over: 
</li> 





视频 


Ulkit 允许 在 幻灯 片 中 放 入 视频 和 iframe e 
Example 


Markup 
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<!-- 带 有 视频 的 幻灯 片 --> 
«ul class-"uk-slideshow"» 


«li» 
«video width-z"" height-z"" autoplay loop muted controls» 
«source src="" type=""> 
</video> 
«/li» 
</ul> 


«1-- 带 有 Iframe 的 幻灯 片 --> 
«ul class="uk-slideshow"> 
«li» 
«iframe src="" width="" height-z"" frameborder-"Q" allowful. 
</li> 
</ul> 





基本 上 可 以 在 幻灯 片 内 插入 任何 内 容 ， 比 如 文本 甚至 整个 网 格 。 


Example 


Headline 1 


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
nonumy eirmod tempor invidunt ut labore et dolore magna 
aliquyam erat, sed diam voluptua. At vero eos et accusam et 
justo duo dolores et ea rebum. 


Read more 





JavaScript 选项 
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选项 默认 值 描述 
: 定义 幻灯 片 之 间 优 先 
animation i eet 
ia 显现 的 过 渡 效果 
duration 500 过 渡 效 果 持 续 时 间 
height 'auto' 幻灯 片 高 度 
定义 显示 的 第 一 张 纪 
start 
9 XT} 
autoplay false X E Ah i2 kT A 
MeN NE 
auseOnHover 鼠标 起 a TA IT 
ý me 自动 播放 
autoplayInterval 7000 定义 幻灯 月 切换 的 时 
[a] 35 RE 
j 定义 是 否 自动 开始 播 
videoautopla de 5 
play true X UH 
d 日 AE P 
videomute true ELK iz] 静音 播放 视 
频 
定义 是 否 启 用 Ken 
kenburns fal A 
vius Burns 效果 
EORUM uk-animation-middle-left, 


uk-animation-top-right, 


uk-animation-bottom-left, uk-animation-top-center, uk-animation-bottom-right | 动 
画 方向 || slices | 15 | X 37 8 Z^ 4e RS JH. T "Slice" 过 渡 效 果 的 话 。 | 


事件 


A RR 参数 描述 
event, next slide 新 的 一 页 显示 时 触发 
show.uk.slideshow , ? a TANN 
current slide (动画 完成 后 ) 
posae Mme EHE event, next slide, 新 的 一 页 显示 前 触发 
current slide (动画 完成 前 ) 
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3i, € [Parallax 
依赖 于 页 面 滚动 条 位 置 的 动态 CSS 特性 。 
用 法 


要 使 用 这 个 组 件 ， 需 要 添加 data-uk-parallax 属性 到 容器 元 素 。 并 为 每 个 你 想 
要 使 之 动态 变化 的 CSS 属性 添加 对 应 的 选项 值 。 注 意 此 组 件 需要 额外 添加 
parallax.js 文件 ,在 js/components 文件 夹 中 。 


Heading 


Lorem ipsum dolor sit amet, 


consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore 
et dolore magna aliqua. 





Markup 


«div data-uk-parallax="{bg: '-200'}">...</div> 


选项 


Ulkit 提供 了 一 系列 的 选项 ， 你 可 以 把 它们 添加 到 data-uk-parallax 属性 中 : 
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选项 描述 


x 以 像素 为 单位 的 X 轴 方 向 位 移 。 

xp 以 百分比 为 单位 的 X 轴 方 向 位 移 。 

y 以 像素 为 单位 的 Y 轴 方 向 位 移 。 

yp 以 百分比 为 单位 的 Y 轴 方 向 位 移 。 

bg 使 背景 图 片 动态 变 化 。 

bgp 以 百分比 为 单位 的 背景 图 片 动态 变化 。 
rotate 以 度 为 单位 的 顺 时 针 动 态 变化 。 

scale 缩放 的 动态 变化 

color 色彩 的 动态 变化 (需要 设置 起 始 值 和 终止 值 ) 
background-color 背景 色彩 的 变化 (需要 设置 起 始 值 和 终止 值 ) 
border-color border 色彩 的 变化 (需要 设置 起 始 值 和 终止 值 ) 
opacity 透明 度 的 变化 


注意 你 可 以 基础 性 地 使 任意 只 有 一 值 的 CSS 属性 动态 变化 ， 比 如 宽度 和 高 度 ， 直 
接 添加 到 属性 中 即 可 。 


Markup 


«div data-uk-parallax="{y: '-200', opacity: '0')'"»5...«/div» 


起 始 值 和 终止 值 


常 由 当前 值 变化 到 你 设置 的 目标 值 。 然 而 ， 你 还 可 以 自己 定义 一 个 起 始 值 。 
过 传递 字符 串 到 包含 由 过 号 隔 开 的 两 个 值 的 选项 中 来 实现 。 


性 3 
i dà 
注意 某 些 属性 ， 比 如 颜色 ， 儿 须要 有 起 始 值 和 终止 值 


Markup 


«div data-uk-parallax-"([x: '-100,100', 'background-color': 'ZEBF7FI 


i] — — B 





餐 套 的 动画 /Nested animation 


为 前 提 的 元 素 使 用 不 同 的 动画 是 很 简单 的 事情 。 只 需 在 视差 容器 中 再 创建 一 个 容 
器 ， 并 在 新 的 data-uk-parallax 属性 中 添加 你 的 选项 即 可 o 


Example 





Markup 


<div data-uk-parallax="{bg: -200}"> 
<div data-uk-parallax="{opacity: '0,1', scale: '0,1'j"5...«/dis 
«/div» 


到 于 





目标 选项 /Target Option 

通常 ， 视 差 动画 从 元 素 进入 视 口 开 始 ， 到 离开 视 口 结束 。 开 始 和 终止 动画 基于 另 一 
个 元 素 在 视 口中 的 可 见 性 ， 使 用 target 选项 进行 设置 。 在 使 用 齿 套 动画 时 会 很 
有 帮助 。 


Example 


Ulkit 中 文 文档 





Markup 


«div id="target-id">...</div> 
«div data-uk-parallax="{target: '#target-id'}">...</div> 


速度 /Velocity 


添加 velocity 选项 ， 调 整 动画 的 缓 动 效 果 。 


Example 


视差 /Parallax 304 


H 
一 


“天 
- " Cm 
nd | 
M 06 Na 
0.04 





Markup 


«div data-uk-parallax-"([velocity: '0.5'}"> 


«/div» 


f, € INNiewport 

使 用 viewport 选项 ， 动 画 持续 时 间 将 被 调整 。 其 值 为 1 AX false 时 ， 视 差 
动画 从 元 素 进 入 视 口 开始 ， 到 离开 视 口 结束 。 将 其 设置 为 0.5 ， 如 下 面 的 例子 ， 
动画 只 在 元 素 出 现 的 前 半 个 视 口 中 发 生 。 


Example 





Markup 


«div data-uk-parallax-"([viewport: '0.5'j"»5...«/div» 


JavaScript 选项 


选项 可 用 值 


velocity float 


target mixed 
viewport BA 
medda integer 
/ string 
手动 初始 化 


默认 
值 


0.5 


false 


false 


false 


描述 
页 面 滚动 时 ， 动 画 的 速度 


关于 动画 持续 时 间 的 元 素 尺 寸 参 考 /Element 
dimension reference for animation duration. 


依赖 于 视 口 的 动画 范围 


启用 视差 效果 的 视 口 宽度 条 件 (比如 
640px) ， 或 CSS 媒 体 查 询 


var parallax = UlIkit.parallax(element, ( /* options */ 3); 


手 风 参 /Accordion 


创建 一 个 列表 菜单 ， 通 过 点 击 它 们 的 标题 来 展开 或 收缩 内 容 。 


用 法 


使 用 手风琴 菜单 ， 为 容器 元 素 添 加 uk-accordion 类 和 data-uk-accordion 
属性 就 行 。 然 后 为 容器 内 的 每 项 内 容 添 加 uk-accordion-content 类 。 最 后 ， 为 
标题 或 者 其 他 元 素 添 加 uk-accordion-title 类 来 创建 拨 动 器 。 注 意 使 用 此 组 
件 需 要 额外 添加 accordion.css 文件 ， 在 css/components 文件 夹 中 。 此 组 件 
需要 额外 添加 accordion.js 文件 ， 在 js/components 文件 夹 中 。 


Heading 1 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore 
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 


aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 


cillum dolore eu fugiat nulla pariatur 


Heading 2 


Heading 3 


Markup 


«div class-"uk-accordion" data-uk-accordion» 


«h3 class-"uk-accordion-title"»...«/h3» 
«div class-"uk-accordion-content"'"»...«/div» 


«h3 class-"uk-accordion-title"»...«/h3» 
«div class-"uk-accordion-content"»...«/div» 


«h3 class-"uk-accordion-title"»...«/h3» 
«div class-"uk-accordion-content"'"»...«/div» 


«/div» 


多 条 同时 展开 


同时 显示 多 条 内 容 ， 而 不 在 其 他 内 容 显示 时 被 隐藏 ， 添 加 {collapse: false) 
选项 到 data 属 性 就 行 了 。 


Example 


Heading 1 


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore 
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur 


Heading 2 


Heading 3 


JavaScript 选项 


选项 可 用 值 默认 值 描述 
showfirst boolean true 初始 化 时 首先 显示 
collapse boolean true 允许 同时 展开 多 条 
animate boolean true 拨 动 动画 
easing string swing 动画 功能 
duration integer 300 动画 持续 时 间 
toggle string .uk-accordion-title 拨 动 器 的 Css 选 择 器 


.Uk-accordion- 


containers string 内 容 容 器 的 Css 选 择 器 
content 
, 条 目 被 激活 时 添加 这 个 
clsactive string uk-active rm e 
手动 初始 化 


var accordion = UIkit.accordion(element, { /* options */ }); 


事件 


名 称 参数 描述 


toggle.uk.accordion event, active, toggle, content 拨 动 时 触发 


i8 4e [Notify 


创建 可 以 被 拨 动 显示 的 通知 ， 并 且 能 自动 淡出 。 


当 你 将 鼠标 巧 停 在 通知 上 面 时 ， 它 不 会 自动 消失 ， 直 到 你 移 开 和 鼠标 。 还 可 以 通过 点 
击 关闭 通知 。 


用 法 


通知 组 件 提 供 了 一 个 简单 的 API， 你 可 以 在 应 用 程序 代码 中 重用 它 。 下 面 的 
JavaScript 代 码 片 段 让 你 快速 上 手 o 注意 使 用 此 组 件 需 要 额外 添加 notify.css 
文件 ， 在 css/components 文件 夹 中 。 此 组 件 需要 额外 添加 notify.js 文件 ， 
在 js/components 文件 夹 中 。 


JavaScript 
UIkit.notify(( 
message : 'Bazinga!', 
status : 'info', 
timeout : 5000, 
pos : 'top-center' 


3): 


// Shortcuts 

UIkit.notify('My message'); 

UIkit.notify('My message', status); 
UIkit.notify('My message', ( /* options */ 3); 


Example 


Message... 





UIkit.notify("Message..."); 


HTML 信息 


"T LE i8 44i REAL URHTML * Foe 图 标 。 


Example 


§ v Message with an icon... 


UIkit.notify("<i class='uk-icon-check'></i> Message with an icon.. 


eS H 








延迟 和 常 驻 /Delay and sticky 


你 可 以 通过 timeout 定义 在 多 少 毫 秒 内 通知 消息 是 可 见 的 。 还 可 以 把 延迟 设 为 
0， 让 通知 消息 常 驻 不 消失 。 


Example 


Sticky message... 





UIkit.notify("Message...", (timeout: 07); 


定位 
添加 以 下 参数 中 的 一 个 来 调整 通知 出 现 的 位 置 。 


top-center 


UIkit.notify("...", (pos:'top-center')) 
top-left 
UIkit.notify("...", ([pos:'top-left')) 


top-right 


UIkit.notify("...", (pos:'top-right')?) 


bottom-center 


UIkit.notify("...", (pos:'bottom-center')) 


bottom-left 


UIkit.notify("...", (pos:'bottom-left')) 


bottom-right 


UIkit.notify("...", (pos:'bottom-right')) 


添加 以 下 参数 中 的 一 个 来 调整 通知 出 现 的 位 置 。 


参数 代码 

Xop-center VIki t. noti fy(" 
fopleft VIkit-notify(" 
fup: rignt VIki t-motify(" 
bottom-center VIki t. notify(" 
bottom-left VIki t notify(" 
bottom-right VIki t. noti fy(" 


T 


Message... 


17 
Message... 
krt 


状态 


通知 可 以 通过 添加 一 些 状 态 效 果 来 表达 一 般 的 消息 


F o 


info 









' top-center' }) 


' top-left’ ]) 


s:' topright' }) 


' bottom-left }) 


1 


" bottom-center']) 


‘bottom-right’ 1) 


示例 
Top Center 
Top Left 
Top Right 


Bottom Center 


Bottom Left 


Bottom Right 


Message... 





UIkit.notify("...", {status:'info'}) 


success 
UIkit.notify("...", {status:'success'}) 
warning 
UIkit.notify("...", {status: 'warning'}) 
danger 
UIkit.notify("...", {status:'danger'}) 


Info message... 


Success message.. 
Warning message i 


Danger message 


ULKIT- OTLILYY ... ;. TastLdLUs. IMLO |? 


搜索 /Search 


轻松 创建 一 个 好 看 的 搜索 框 。 


用 法 


搜索 组 件 由 搜索 表单 和 搜索 文本 域 组 成 。 注 意 使 用 此 组 件 需要 额外 添加 
search.css 文件 ,在 css/components 文件 夹 中 。 此 组 件 需 要 额外 添加 
search.js 文件 ， 在 js/components 文件 夹 中 。 


Class X 描述 


添加 这 个 类 到 &lt;form&gt; 元 素 中 ， 定 义 搜索 组 
件 。 

添加 这 个 类 到 &lt;input&gt; 元 素 中 创建 一 个 搜索 
文本 域 。 


.Uk-search 


.Uk-search-field 
为 了 使 搜索 框 所 必须 的 JavaScript 能 够 生效 ， 需 要 添加 data-uk-search 属性 。 


Example 


Markup 


«form class="uk-search" data-uk-search> 
«input class="uk-search-field" type="search" placeholder=""> 
</form> 


JSON 搜索 结果 


在 需要 用 JSON 格 式 化 搜索 结果 的 表单 中 添加 {source:'PATH/TO/RESULTS'} 到 
data 属 性 中 ， 并 设置 JSON 文 件 的 路 径 (示例 ). 你 可 以 用 下 拉 菜 单 组件 中 的 下 拉 菜 六 
来 显示 搜索 结果 。 搜 索 的 结果 会 注入 并 显示 在 下 拉 菜 单 中 。 你 甚至 可 以 用 键盘 上 的 
上 下 键 来 操作 这 个 下 拉 菜 单 。 


重要 这 样 的 搜索 框 需要 用 到 自动 完成 组 件 。 请 确定 你 已 经 将 他 们 引入 了 。 


Example 


Article title 
Lorem ipsum dolor sit amet, consectetur 
Article title 
Ut enim ad minim veniam, quis nostrud 
Article title 
Duis aute irure dolor in reprehenderit 














rticle title ? 


m p 


xcepteur sint occaecat cupidatat non 


More Results 


Markup 


«form class-"uk-search" data-uk-searchz'"[source:'my-results.json'?' 
«input class-"uk-search-field" type-z'search" placeholder=""> 
<!-- 这 是 通过 JavaScript 注 入 了 搜索 结果 的 下 拉 菜 单 --> 
«div class="uk-dropdown uk-dropdown-search"» 

«ul class-"uk-nav uk-nav-search'»...«/ul» 


«/div» 


«/form» 


a 一 一 一 





导航 条 中 的 搜索 


搜索 框 也 可 以 用 在 导航 条 中 . 


Example 


Markup 


«nav class-"uk-navbar"» 
«div class-"uk-navbar-flip"» 


«div class-"uk-navbar-content"» 
«form class-z"uk-search" data-uk-searchz'[source: 'my-re: 


«/form» 
«/div» 
«/div» 
«/nav» 








aj 


抽 层 中 的 搜索 


搜索 框 也 可 以 放 在 抽 层 中 。 


Example 





Markup 


«1-- 这 是 开关 抽 层 边栏 的 按钮 --> 
«button class="uk-button" data-uk-offcanvas="{target: '#my-id'}">.. 


<1-- 这 是 抽 层 边栏 --> 
«div id-"my-id" class="uk-offcanvas"> 
«div class-"uk-offcanvas-bar'» 
«form class-'"uk-search'"» 
«/form» 
«/div» 
«/div» 


«| = 








JavaScript 选项 


选项 THA RUA 描述 
source string ^ 数据 源 的 URL 
minLength integer 3 触发 自动 完成 的 最 小 输入 长 度 
param string search 发 送 Ajax 请 求 的 查询 名 称 
delay integer 300 停止 输入 后 的 延 时 
手动 初始 化 


var search = UIkit.search(element, { /* options */ }); 


事件 
跟 自 动 完成 组 件 的 事件 一 样 。 


"$ Z[Nestable 


€| x£ T 138 3: 46 4R BET 89 T APA. ° 


可 典 套 组 件 允 许 你 通过 拖 措 排序 条 目 。 这 是 非常 有 用 的 ， 比 如 在 管理 界面 中 希望 组 
织 不 同 的 分 类 或 者 菜单 条 目 时 。 


用 法 


可 谋 套 列表 由 列表 本 身 、 它 的 内 容 条 目 和 可 典 套 的 面板 组 成 。 注 意 使 用 此 组 件 需 要 
额外 添加 nestable.css 文件 ， 在 css/components 文件 夹 中 。 此 组 件 需 要 额 
外 添加 nestable.js 文件 ， 在 js/components 文件 夹 中 。 


class 和 data 属 性 描述 
添 类 . . T > Z od cp aum Z 
.Uk-nestable 大 加 此 类 名 到 &lt;ul&gt; AK’? XL d RR 
件 。 
.Uk-nestable-item 添加 此 类 名 到 列表 的 每 一 个 &ltli&gt; JG ° 


添加 此 类 名 到 &1t;li&gt; 元 素 内 部 的 


.Uuk-nestable-panel m Mee ALIS 
: &lt;div&gt; 元 素 ， 给 条 目 设 定 样 式 。 


NOTE 为 了 使 必要 的 JavaScript 生 效 ， 需 要 添加 data-uk-nestable 属性 。 


Example 


«ul class-z"uk-nestable" data-uk-nestable» 
«li class-"uk-nestable-item"» 
«div class-z"uk-nestable-panel"» ... </div> 
</li> 
</ul> 


T 4& 28 fF 83 3-38 Nestable handle 


默认 地 ， 整 个 可 能 套 元 素 都 可 以 用 来 拖 搜 排序 。 要 创建 一 个 替换 默认 效果 的 手柄 ， 
需要 添加 (handleClass:'uk-nestable-handle') 选项 到 data 属性 中 。 并 为 你 
想 要 用 作 手 柄 的 元 素 添 加 手柄 的 类 名 。 


Example 


z Item 1 
= ltem 
= iten 
zz Hem4 


NOTE 在 这 个 例子 中 ， 我 们 使 用 了 图 标 组 件 中 的 .uk-icon-bars 类 名 ， 来 为 手 
酉 定义 样式 。 


Markup 


«ul class="uk-nestable" data-uk-nestable="{handleClass:'uk-nestableę 
«li class="uk-nestable-item"> 
«div class="uk-nestable-panel"> 
«div class="uk-nestable-handle"></div> 


</div> 
</li> 
</ul> 


E a 





*[ 4x A4 z;/Nestable toggle 


默认 地 ， 整 个 可 能 套 元 素 都 能 拖 搜 排序 。 要 创建 一 个 替换 默认 效果 的 手柄 ， 需 要 添 
加 .uk-nestable-toggle 类 名 和 data-nestable-action-"toggle" 属性 到 
"ud &lt;div&gt; 元 素 。 


Example 


Item 2 
Item 3 


Item 4 


Markup 


«ul class-z"uk-nestable" data-uk-nestable"» 
«li class-z'"uk-nestable-item'"- 
«div class-"uk-nestable-panel'"» 
«div class-"uk-nestable-toggle" data-nestable-action-z'! 


«/div» 
</li> 
</ul> 


同仁 





多 个 列表 的 排 友 


要 实现 垮 列 表 的 排序 ， 你 可 以 为 每 个 列表 添加 e 
data-uk-nestable="{group:'GROUP-NAME'}" 属性 将 他 们 归 为 一 组 。 


Example 

First list Second list 
Item 1 item 1 
em 2 Item 2 


Item 3 Item 3 





Item 4 Item 4 


Markup 


«ul class-"uk-nestable" data-uk-nestable-"[group:'my-group'?"»...«, 
«ul class-"uk-nestable" data-uk-nestable-"[group:'my-group'?"»...«, 


" 2 








SH E 


禁用 列表 条 目的 获 套 ， 你 只 需 添 加 data-uk-nestable-"(maxDepth:1)" 属性 。 
当然 你 还 可 以 使 用 此 属性 来 确定 要 诺 套 的 深度 能 有 多 大 。 


Markup 


«ul class-"uk-nestable" data-uk-nestable="{maxDepth:1}">...</ul> 


JavaScript 选项 
这 是 一 个 如 何 使 用 data 属 性 来 设置 选项 的 例子 : 


data-uk-nestable-"(maxDepth:0, group:'widgets')" 


选项 TAA X 描述 
group string false 列表 组 
maxDepth integer 10 JUGE EU XA 
threshold integer 20 A Xo E4546 48 A 
EL o 


string ul 列表 节点 名 称 


itemNodeName 


listBaseClass 


listClass 


listitemClass 


itemClass 


dragClass 


movingClass 


handleClass 


collapsedClass 


placeClass 


noDragClass 


noChildrenClass 


emptyClass 


string 


string 


string 


string 


string 


string 


string 


string 


string 


string 


string 


string 


string 


string 


ul 
li 
uk-nestable 


uk- 
nestable- 
list 
uk- 


nestable- 
list-item 


uk- 
nestable- 
item 

uk- 
nestable- 
list- 
dragged 


uk- 
nestable- 
moving 


uk- 
nestable- 
handle 


uk- 
nestable- 
collapsed 


uk- 
nestable- 
placeholder 


uk- 
nestable- 
nodrag 


uk- 
nestable- 
nochildren 


uk- 
nestable- 


列表 节点 名 称 


条 目 节 点 名 称 
列表 的 基本 类 名 


列表 的 类 名 


列表 条 目的 类 名 


条 目 类 名 


添加 到 被 拖 搜 列表 的 类 名 


拖 动 时 添加 到 
&lt;html&gt; 元 素 的 类 名 


拖 搜 手柄 的 类 名 


被 收缩 的 条 目的 类 名 


当前 被 拖 搜 元 素 的 占 位 符 类 名 


带 有 此 类 名 的 元 素 不 会 触发 拖 
3% ° Elements with this class 
will not trigger dragging. 
Useful when having the 
complete item draggable and 
not just the handle. 


带 有 此 class 的 元 素 不 再 有 子 
级 元 素 。 这 对 于 最 低层 级 的 条 
目 很 有 用 。 


空 列表 的 类 名 


empty 
手动 初始 化 


var nestable = UIkit.nestable(element, { /* options */ 3); 


Events 
名 称 参数 描述 
start.uk.nestable event, nestable object 拖 搜 和 开始 时 触发 
move.uk.nestable event, nestable object M um 
stop.uk.nestable event, nestable object 拖 搜 终止 时 触发 


event, nestable item, AETA A A H Ak 


change.uk.nestable 7 K 
i action 发 


可 排序 /Sortable 


创建 可 排序 的 网 格 和 列表 重新 来 排列 元 素 的 顺序 。 


拖 搜 元 素 到 另 一 个 可 排序 的 网 格 中 的 某 处 ， 该 网 格 中 其 它 条 目 会 自动 适应 排列 顺 
序 。 这 将 会 在 诸如 排列 画廊 条 目 或 者 菜单 条 目 时 显得 尤为 有 用 。 


用 法 


要 使 用 这 个 组 件 ， 需 要 在 容器 中 添加 .uk-sortable 类 ， 然 后 创建 子 元 素来 定义 
这 个 组 件 。 为 了 使 必要 的 JavaScript 生 效 ， 还 需要 添加 data-uk-sortable /& 
性 。 注 意 使 用 此 组 件 需要 额外 添加 sortable.css 文件 ， 

在 css/components 文件 夹 中。 此 组 件 需要 额外 添加 sortable.js 文件 ， 

在 js/components 文件 夹 中 。 


Example 
在 这 里 的 例子 中 ， 我 们 使 用 到 了 网 格 组 件 来 放置 可 排序 的 条 目 。 


Item 1 tem 2 Item 3 Item 4 tem 5 
Item 6 tem 7 Item 8 Item 9 Item 10 
Markup 


«ul class-z"uk-sortable" data-uk-sortable» 
<li> </> 
«li»...«/1li» 

«/ul» 


任意 元 素 的 排序 
可 排序 组 件 并 不 限制 只 能 用 于 &lt;ul&gt; 元 素 。 你 可 以 使 用 任意 块 元 素 作 为 容 


eR 
o 
zs 


Markup 


«div class-"uk-sortable" data-uk-sortable» 
<div>. ..</div> 
<div>. ..</div> 

</div> 


可 排序 手柄 


默认 地 ， 整 个 可 排序 元 素 都 可 以 拖 搜 进行 排序 。 为 了 创建 一 个 操作 手柄 ， 只 需 为 希 
Me 手柄 的 元 素 添加 (handleClass:'uk-sortable-handle') 选项 到 data 属 
， 并 添加 手柄 的 class 类 名 。 


Example 
三 ltem 1 = item 2 = Hem 3 = ltem 4 = ltem 5 
= ltem 6 = ltem 7 = tem 8 = Item 9 = tem 10 


NOTE 在 这 个 例子 中 ， 使 用 了 图 标 组 件 中 的 .uk-icon-bars 类 名 来 设 定 手柄 的 
样式 。 


Markup 


«ul class="uk-sortable" data-uk-sortable="{handleClass:'uk-sortableę 
«li»«div class-"uk-sortable-handle"»«/div»...«/li» 
«/ul» 


-| SS SS 





多 个 列表 之 间 的 排序 


为 了 是 跨 列 表 的 拖 搜 排序 成 为 可 能 ， 你 需要 为 每 个 列表 添加 
data-uk-sortable="{group:'GROUP-NAME'}" 属性 ， 将 它们 归 为 一 组 。 


Example 


Item 1 


Item 2 


Item 3 


Item 4 


Markup 


Item 1 


Item 2 


Item 3 


Item 4 


«ul class-"uk-sortable" data-uk-sortable-"[group:'my-group'?"»...«, 
«ul class-"uk-sortable" data-uk-sortable-"[group:'my-group'?"»...«, 


is] — E 


JavaScript 选项 


P 





这 是 一 个 关于 如 何 通 过 data 属 性 设置 选项 的 例子 : 


data-uk-sortable="{animation:0, dragCustomClass:'dragging')" 


选项 


group 


animation 


threshold 


handleClass 


dragCustomClass 


手动 地 初始 化 元 素 


String 


integer 


integer 


String 


String 


false 


150 


10 


描述 


列表 的 组 
毫秒 计时 的 动画 


触发 元 素 拖 搜 的 鼠标 移动 像素 距离 的 
DEH 


自 定 义 类 名 ， 用 于 定义 哪些 元 素 可 以 
触发 排序 


添加 到 被 拖 搜 元 素 中 的 自 定 义 类 


var sortable = UIlkit.sortable(element, 


Events 


Name 


start.uk.sortable 


move.uk.sortable 


stop.uk.sortable 


change.uk.sortable 


Parameter 


event, sortable object, dragged 
element 


event, sortable object 


event, sortable object, dragged 
element 


event, sortable object, dragged 
element, action 


v options a 


Description 


可 排序 拖 搜 开 
始 时 触发 


移动 可 排序 条 
目 时 触发 


拖 搜 终止 时 触 
发 


改变 可 排序 条 
目 时 触发 


附着 /Sticky 

让 页 面 元 素 保 持 在 视 口 顶部 ， 比 如 跟随 滚动 的 导航 栏 。 

用 法 

创建 一 个 能 在 页 面 滚动 时 能 保持 在 视 口 顶部 的 页 面 元 素 ， 添 加 data-uk-sticky 
属性 到 该 元 素 即 可 。 注 意 使 用 此 组 件 需 要 额外 添加 sticky.css 文件 ， 

在 css/components 文件 夹 中 。 此 组 件 需 要 额外 添加 sticky.js 文件 ， 


在 js/components 文件 夹 中 。 


Example 


RH 二 TD 过 


PT HP 


Markup 


«div data-uk-sticky»...«/div» 


zb > E-A 
WT RE X 
还 可 以 定位 元 素 处 于 视 口 边缘 下 的 位 置 。 比 如 ， 添 加 


data-uk-sticky-"(top:100)" 属性 创建 100px 的 margin ° 


Example 


在 距离 顶部 边缘 100px 的 位 置 


Markup 


«div data-uk-sticky="{top:100}">...</div> 


添加 延迟 


为 元 素 添加 延迟 ， 这 样 使 它 能 
一 个 负 偏 移 值 到 data 属 性 ， 比 如 
动画 让 元 素 可 以 平滑 地 再 次 出 现 。 


在 页 面 滚动 特定 距离 后 才 变 成 粘连 状态 ， 你 需要 添加 
data-uk-sticky="{top:-200}" 。 还 可 以 添加 


Example 


深 动 100px 后 再 粘连 在 顶部 


Markup 


'uk-animation-slide-top 


«div data-uk-sticky-"[top:-200, animation: 





响应 式 行为 
还 可 以 通过 在 data 属 性 中 添加 断 点 选项 ， 来 实现 在 不 同 设备 上 禁用 粘连 行为 ， 比 如 
。 另 外 ， 还 可 以 使 用 媒体 查询 来 控制 。 


data-uk-sticky-"(media: 640)" 


Markup 


«!-- This is basically a shortcode to define a min-width --> 
«div data-uk-stickyz"(media: 640}": 


«!-- This is a media string using i 
«div data-uk-sticky-z"([media: '(min: 








附着 的 边界 


可 以 通过 设置 boundary 参数 定义 元 素 附 着 行为 的 边界 ， 使 其 只 在 该 范围 内 跟随 滚 
动 。 


Example 
Sticky bound to parent container Sticky as long as bondary element is in 
iev 
Boundary element 
Markup 


«!-- Bind sticky to its parent element --> 
«div data-uk-sticky-z"([boundary: tri 


«!-- Bind sticky to any element --: 
«div data-uk-sticky-z"([boundary: 'zr 


: = 
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选项 可 用 值 
top integer 
animation string 
clsinit string 
clsactive string 
clisinactirzve string 


getwidthFrom string 


mesia ne 
target boolean 
showup boolean 
boundary mixed 
手动 初始 化 元 素 


var sticky = Ulkit.sticky(element, 


事件 


名 称 
active.uk.sticky 


inactive.uk.sticky 


SA 
值 


0 


uk- 
sticky- 
init 
uk- 
active 


false 


false 


false 


false 


描述 


触发 附着 行为 的 顶部 偏 移 量 
Ulkit 的 动画 class 


元 素 首 次 附着 时 进行 初始 化 的 class 


元 素 附 着 时 添加 的 class 


元 素 未 附着 时 添加 的 class 

粘连 模式 下 获取 宽度 的 CSS 选 择 器 。 
默认 情况 下 它 从 已 创建 的 外 层 元 素 获 
取 宽 度 值 2 

激活 状态 所 需 的 整 型 宽度 条 件 ， 或 
CSS 媒 体 查询 

确保 粘连 元 素 不 会 在 DOM 就 绪 后 通过 
位 置 散 列 (location hash) 越过 目标 
是 否 仅 在 滚动 时 显示 附着 的 元 素 
设置 为 true 将 粘连 绑 定 到 父 元 素 
或 使 用 CSS 选 择 器 将 粘连 绑 定 到 特定 


{ /* options */ }); 


参数 描述 
event 获得 附着 效果 


event 脱离 附着 状态 


IT 8] 3 d 2S 
轻松 创建 可 以 从 预 填 充 下 拉 菜 单 中 选择 时 间 的 时 间 选 择 器 。 


用 法 


将 data-uk-timepicker 属性 添加 到 &lt;input&gt; 元 素 中 就 能 创建 时 间 选 
择 器 。 获 得 焦点 后 ， 时 间 选 择 器 会 自动 显示 预 填充 的 下 拉 菜 单 ， 可 以 通过 键盘 上 的 
上 下 按钮 或 滚动 鼠标 进行 浏览 。 注 意 使 用 此 组 件 需要 额外 添加 timepicker.js 
文件 ， 在 js/components 文件 夹 中 。 


重要 时 间 选 择 器 组 件 需要 自动 完成 组 件 才能 生效 。 请 确保 已 经 将 两 者 引入 页 面 。 














Example 
0:00 
01:00 
)1:3C data-ul 
Jii 
Markup 


«form class-"uk-form"» 
«input type="text" data-uk-timepicker-» 
«/form» 


显示 子午 线 时 间 
添加 format 选 项 并 设置 为 12h 即 可 显示 子午 线 时 间 。 


Example 

















12:00 A 
12:30 A 
1:00 AM 
01:30 AN data-ul 
2:00A 
2:30 A 
:00 AN 
ARN S 
Markup 


<form class="uk-form"> 
<input type="text" data-uk-timepicker="{format:'12h'}"> 
</form> 


JavaScript 选项 
这 是 如 果 通过 属性 设置 选项 的 例子 : 


data-uk-timepickerz"[format:'12h')" 


选项 可 用 值 默认 值 描述 
format '24h' or '12h' '24h' 定义 时 间 表 示 法 
Start Integer between 0 and 24 0 起 始 时 间 
end Integer between 0 and 24 24 终止 时 间 
手动 初始 化 元 素 


var timepicker = UIkit.timepicker(element, ( /* options */ )); 


Jg — n. 
工具 提示 /Tooltip 
轻松 创建 一 个 漂亮 的 工具 提示 。 
用 法 
要 应 用 这 个 组 件 ? 需要 为 某 个 元 素 添 加 data-uk-tooltip 属性 m 你 还 需要 添加 
一 个 title 属性 ， 它 的 值 即 是 提示 文本 。 
注意 使 用 此 组 件 需 要 额外 添加 tooltip.css 文件 ， 在 css/components 文件 来 


中 。 此 组 件 需 要 额外 添加 tooltip.js 文件 ， 在 js/components 文件 夹 中 。 


Example 


cu 


Hover me | Hover me 


Markup 


«button class-"uk-button" data-uk-tooltip title-z""-...«/button» 
«span data-uk-tooltip title-""-2...«/span- 


对 齐 


添加 下 列 选项 之 一 到 data-uk-tooltip 属性 中 来 调整 提示 组 件 的 文本 对 齐 方 
EM 


属性 


pos:'top' 


pos:'top-left' 


pos:'top-right' 


pos: 'bottom' 


pos:'bottom-left' 


pos:'bottom-right' 


pos: Tett 
poss rag" 
Markup 


描述 示例 


组 件 对 齐 到 顶部 。 ER 


Hover me 


asfazr ENS 


Hover me 


anninst. MM 


Hover me 


Hover me 


Hover me 


EE ^m 


Hover me 


组 件 对 齐 


n 
AA 


未 组 件 对 齐 到 右 下 。 A 





组 件 对 齐 到 左 侧 。 REMISE Hover me 


ZR 4E 3-2] Zh] o Hover me 





«button class-"uk-button" data-uk-tooltip-"[(pos:'bottom-left'3" ti! 


Ki — B 
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这 是 一 个 如 何 通 过 属性 来 设置 选项 的 示例 : 


data-uk-tooltip-z"[pos:'bottom-left')" 


选项 


offset 
pos 
animation 
delay 


cls 


activeClass 


可 用 的 
值 


integer 
string 
boolean 
integer 


string 


string 


默认 值 


5 
'top' 
false 
0 


'uk- 
active' 


描述 
与 源 元 素 之 间 的 偏 移 量 
工具 提示 组 件 定位 
工具 提示 的 淡 入 动画 
提示 组 件 延 迟 显 示 多 少 毫 秒 
显示 提示 时 ， 添 加 的 自 定 义 class 


被 拨 动 的 选中 类 名 /Toggled active 
class 


上 传 


允许 用 户 通过 文件 表单 或 占 位 符 域 来 上 传 文件 


用 法 


这 个 Javascript 组 件 运用 了 最 新 的 XMLHttpRequest Level 2 规范 ， 提 供 了 通过 包含 
上 传 进 度 条 的 Ajax 进行 文件 上 传 追踪 的 功能 。 本 组 件 提供 了 两 种 上 传 文件 的 方式 : 

select 和 drop » select 请 求 只 能 被 用 在 &lt;input type-"file"&gt; 
元 素 中 ， 而 drop 基本 可 以 用 在 任何 元 素 ， 通过 从 桌面 将 文件 拖 搜 到 指 定 元 素 就 
能 轻松 实现 上 传 。 记 住 ， 本 组 件 并 不 在 服务 器 上 处 理 文件 上 传 。 


注意 使 用 此 组 件 需 要 额外 添加 upload.css 文件 ， 在 css/components 文件 夹 
中 。 此 组 件 需 要 额外 添加 upload.js 文件 ， 在 js/components 文件 夹 中 。 


上 传 组 件 需要 根据 你 的 要 求 单独 进行 实施 。 "在 我 们 的 例子 中 ， 我 们 使 用 占 位 符 和 文 
件 表 单 ， 同 时 使 用 了 drop 和 select 请 求 。 另 外 ， 还 是 用 了 进度 条 来 显示 上 传 
进度 。 


Example 
和 文件 拖 搜 至 此 或 选择 一 个 文件 
Markup 
«div id-"upload-drop" class-z"uk-placeholder"'» 
Info text... «a class-'uk-form-file"»Select a file«input id-"u[ 
«/div» 


«div id-"progressbar" class-"uk-progress uk-hidden"> 
«div class-"uk-progress-bar" style="width: 096;"2...«/div» 
«/div» 


Aoo Og 





JavaScript 


为 了 创建 select 和 drop 上 传 监听 器 ， 你 需要 使 用 目标 元 素 和 选项 来 实例 化 
每 个 上 传 class， 以 定义 回调 和 其 他 有 用 的 设置 。 


«script» 


$(function()([ 
var progressbar = S$('"£Zprogressbar"), 
bar - progressbar.find('.uk-progress-bar'), 
settings -( 


y 
var 


3); 


</script> 


action: '/', // 上 传 路 径 url 
allow : '*.(jpgljpeglgif|png)', // 只 允许 上 传 图 片 


loadstart: function() (1 
bar.css("width", "0%").text("0%"); 
progressbar.removeClass("uk-hidden"); 


, 


progress: function(percent) { 
percent - Math.ceil(percent); 
bar.css("width", percent-"96?").text(percent-"96" ) ; 


}, 


allcomplete: function(response) { 
bar.css("width", "100%").text("100%"); 


setTimeout(function(){ 
progressbar.addClass("uk-hidden"); 


j, 250); 

alert("Upload Completed") 
} 
select = UIkit.uploadSelect($("#upload-select"), settir 
drop = UIkit.uploadDrop($("#upload-drop"), settings), 
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选项 可 用 值 RUA 描述 


action string 上 传 的 目标 URL 
single boolean true 逐一 进行 文件 发 送 
param string files[] 传递 查询 名 称 
params JSON Object 他 额外 的 请 求 参 数 
allow string . 文件 过 滤器 
filelimit integer false 文件 上 传 数量 限制 
type (text | json) text 来 自 服务 器 的 响应 类 型 
回调 事件 

名 称 参数 
before settings, files 
beforeAll files 
beforeSend xhr 
progress percent 
complete response, xhr 
allcomplete response, xhr 
notallowed file, settings 
loadstart event 
load event 
loadend event 
error event 
abort event 


readystatechange event 


